![](/img/trans.png)
[英]Safari fails XMLHttpRequest (POST) with ' Request header field Content-Type is not allowed by Access-Control-Allow-Headers'
[英]$.ajax post Request header field Content-Type is not allowed CORS
提出CORS要求时出现以下错误。 有趣的是,这在safari中有效,但在谷歌浏览器和Firefox中不起作用。 我一直在浏览所有内容,但在网络上找不到任何解决方案。
我正在尝试将json发送到服务器,但据我所知,在将其发送到服务器之前需要将其设置为字符串,因此我正在使用JSON.stringify,但最终我期望服务器提供json结果。
这就是我正在打电话的原因。 (我只是试着看标题)
HTTP/1.1 200 OK
Date: Tue, 18 Apr 2017 15:13:04 GMT
Server: Apache
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Max-Age: 21600
Content-Length: 213
Content-Type: application/json
这就是我在chrome网络标签上得到的
最后一部分是我的代码
function foo(api_key, url, query, pdata, callback) {
var result = 'none';
if (typeof pdata != "undefined"){
var mydata = {"api_key": api_key, "query": query, "data": pdata };
}
else {
var mydata = {"api_key": api_key, "query": query};
}
$.ajax({
method : "POST",
url : url,
data: JSON.stringify(mydata),
contentType: "application/json;charset=UTF-8",
cache: false,
dataType: "json",
success : function(data) {
console.log("API call is working successfully!")
callback(data);
result = data
},
error: function( data, status, error ) {
console.log("API call failed!")
}
});
return result;
}
这是我得到的错误。
XMLHttpRequest cannot load https://my_url. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
api.js:29 API call failed!`
我应该怎么做,更改或添加使其在chrome和firefox中运行?
您的ajax请求似乎正确,但是问题出在服务器端。 对于每个cors
请求,浏览器都会发送一个飞行前请求。 只有通过服务器端验证预检请求后,您才能发送cors ajax请求。
因此,根据用于预检请求的服务器类型,您需要向浏览器发送适当的响应。
正确的响应意味着在预检请求的响应上设置适当的标头 ,然后将其发送回客户端,即浏览器。
对于curl
请求,您不需要这样做,因为curl请求不会在服务器端通过预检请求验证。
由于安全性原因,仅在浏览器需要的情况下才需要。
一个例子可能是这样的-
HttpResponse response = new HttpResponse(request.getProtocolVersion(), NO_CONTENT);
HttpHeaders headers = response.headers();
headers.set(HttpHeaders.Names.CONNECTION, HttpHeaders.Values.CLOSE);
headers.set(CONTENT_TYPE, "text/plain; charset=UTF-8");
headers.set(CACHE_CONTROL, "max-age=31536000, public");
headers.set(ACCESS_CONTROL_ALLOW_ORIGIN, request.headers().get("Origin"));
headers.set(ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
headers.set(ACCESS_CONTROL_MAX_AGE, "31536000");
headers.set(ACCESS_CONTROL_ALLOW_METHODS, "POST, GET, OPTIONS");
headers.set(ACCESS_CONTROL_ALLOW_HEADERS, request.headers().get("Access-Control-Request-Headers"));
headers.set(ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
send(response);
这只是一个示例,但是您将如何完成它完全取决于您所使用的服务器端和服务器框架。
问题解决了! 客户端的一切都正确
开始在服务器上使用CORS lib
from flask_cors import CORS
正如@WitVault所说,使用这些设置配置服务器解决了我的问题!
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.