Javascript $.ajax post请求标头字段内容类型不允许为CORS

我在发出CORS请求时出现以下错误。有趣的是，这在safari中有效，但在google chrome和firefox中无效。我已经查遍了所有的东西，但还没有在网上找到任何解决方案

我正在尝试将json发送到服务器，但据我所知，在发送到服务器之前，我需要将其设置为字符串，因此我使用了json.stringify，但最后我希望从服务器获得json结果

这就是我在curl通话中听到的。（我只是想看看标题）

这就是我在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);

---

这只是一个示例，但您将如何在您的服务器端执行此操作完全取决于您使用的服务器端和服务器框架。

实际上，您的

飞行前

请求失败，因为您正在设置

内容类型

，但响应中没有

内容类型

标题

因此，或者不要将

内容类型设置为
json
，而是使用
text/plain、form data
绕过飞行前请求，直接将ajax请求发送到跨域服务器

或者在服务器上设置
访问控制允许标题：内容类型
标题

在apache上设置头文件

标题集访问控制允许标题“内容类型”

会有用的

问题解决了！客户端的一切都是正确的

已开始在服务器上使用CORS库

from flask_cors import CORS 

正如@WitVault所说，使用这些设置配置服务器解决了我的问题

cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'

如果您的后端对请求
内容类型
标题不挑剔，您可以始终将其设置为
text/plain
，这使其成为一个简单的请求，从而避免飞行前的
选项
请求尝试使用
crossDomain:true
更新您的选项。这应该是自动的，但可能会失败？可能对将来的参考很有用，但请包含文本内容，而不是简单地发布代码的屏幕截图/图像。@Koen不，你读过该属性的文档吗？@Phil你想说什么？当我通过curl调用API时，我在响应中看到
访问控制允许标题：Content Type
。这意味着它已经被设置为
accesscontrolallowheaders:contenttype
对吗？是的。。如果这是他们的回应。这将是他们唯一的要求。。如果未在服务器上设置..在您上传的图像中。。标头仅在请求中。。响应中不存在。这是一个flask项目，我检查了服务器端，并且选项已经设置为
response.headers.add（“访问控制允许源文件”，“*”）response.headers.add（“访问控制允许头文件”，“内容类型”）
但我仍然得到
飞行前响应中的Access Control Allow header不允许的请求标头字段内容类型。
我在比较safari和chrome中的响应标头时意识到了这一点。内容类型在safari中为
application/json
（如预期），但在chrome中为
text/html；charset=utf-8
那么你知道如何防止chrome这样做吗？你是否从flesk外部将响应类型设置为
application/json
？我在比较safari和chrome中的响应头时意识到了这一点。内容类型在safari中为
application/json
（如预期），但在chrome中为
text/html；charset=utf-8
那么你知道如何防止chrome这样做吗？
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'