jquery的ajax is not allowed Access-Control-Allow-Headers in preflight response 自定义headers

本文介绍了一个简单的跨域问题解决方案,并通过在前端请求中添加自定义请求头来实现。具体做法是在发送AJAX请求时设置lang参数,而后端需配置允许此自定义头,确保前后端一致。

看之前,这个问题只是简单的传递数据,然后再头部添加自定义字段.(没有jsonp啊,跨域啊等等)

源代码:

var lang= 'zh-cn'

$.ajax({
     url:'就是一般的url',
    type:'get',
    dataType : 'json',
    beforeSend: function(request) {
         request.setRequestHeader("lang", lang);
    },
    success:function(res){
console.log(res.data)
    },
    fail:function(err){
console.log(err)
alert('服务器异常,请刷新重试!')
    }

})

解决办法:

后台加入跨域:

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");

response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Accept, X-Token, lang");

response.setHeader("Access-Control-Expose-Headers", "*");

分析:红色圈住重点要考试。前端在头部加入自定义的字段lang时,后天要允许这个头部字段,经实际验证,可靠无疑。

`Request header field iam - referer is not allowed by Access-Control-Allow-Headers in preflight response` 错误表明在预检请求(preflight request)中,服务器返回的 `Access-Control-Allow-Headers` 响应头不允许使用 `iam - referer` 请求头。`Access-Control-Allow-Headers` 用于指示在实际请求中可以使用哪些 HTTP 头[^1]。 解决该问题可以从服务器端和客户端两方面入手: #### 服务器端解决方案 在服务器端,需要修改 `Access-Control-Allow-Headers` 响应头,将 `iam - referer` 包含进去。以下是不同后端语言的示例: ##### Node.js(使用 Express 框架) ```javascript const express = require('express'); const app = express(); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Headers', 'iam - referer, Content-Type'); res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); next(); }); // 其他路由和中间件 app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` ##### Python(使用 Flask 框架) ```python from flask import Flask, request, make_response app = Flask(__name__) @app.after_request def add_cors_headers(response): response.headers['Access-Control-Allow-Headers'] = 'iam - referer, Content-Type' response.headers['Access-Control-Allow-Origin'] = '*' response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE' return response @app.route('/') def index(): return 'Hello, World!' if __name__ == '__main__': app.run(debug=True) ``` #### 客户端解决方案 如果无法修改服务器端代码,可以尝试在客户端移除 `iam - referer` 请求头。以下是使用 `fetch` API 的示例: ```javascript const requestOptions = { method: 'GET', headers: { // 移除 iam - referer 请求头 'Content-Type': 'application/json' } }; fetch('https://example.com/api', requestOptions) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值