繁体   English   中英

$ .ajax post请求标头字段不允许Content-Type CORS

[英]$.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);

这只是一个示例,但是您将如何完成它完全取决于您所使用的服务器端和服务器框架。

实际上,您的preflight请求失败,因为您正在设置content-type但是响应中不存在Content-Type标头。

因此,要么不将content-type设置为json ,要么使用text/plain, form-data绕过预检请求,然后直接将ajax请求发送到跨域服务器。

或在服务器上设置Access-Control-Allow-Headers:Content-Type标头。

在apache上设置标题

Header set Access-Control-Allow-Headers "Content-Type"

将工作。

在此处输入图片说明

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

开始在服务器上使用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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM