jQuery 如何在跨域 (CORS) XMLHttpRequest 中发送自定义标头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13994507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you send a custom header in a cross-domain (CORS) XMLHttpRequest?
提问by mooreds
I am trying to send a CORS request for a JSON payload. I control both the server and the client.
我正在尝试为 JSON 负载发送 CORS 请求。我控制服务器和客户端。
I'm following along here: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control
我在这里关注：https: //developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control
The server has a custom header that must be sent along with every request. This custom header therefore makes the request 'not simple' and thus the request must be preflighted with an OPTIONS request.
服务器有一个自定义标头，必须与每个请求一起发送。因此，此自定义标头使请求“不简单”，因此必须使用 OPTIONS 请求对请求进行预检。
I can see jquery making the OPTIONS request, but it doesn't send the custom header along.
我可以看到 jquery 发出 OPTIONS 请求，但它没有发送自定义标头。
Methods I've tried:
我试过的方法：
- using the beforeSend option: http://api.jquery.com/jQuery.ajax/
- using an ajax prefilter: http://api.jquery.com/jQuery.ajaxPrefilter/
- 使用 beforeSend 选项：http: //api.jquery.com/jQuery.ajax/
- 使用 ajax 预过滤器：http: //api.jquery.com/jQuery.ajaxPrefilter/
In both cases, the browser is not sending the custom header along.
在这两种情况下，浏览器都不会发送自定义标头。
I'm using FF 17.0.1, jquery 1.8.3.
我正在使用 FF 17.0.1，jquery 1.8.3。
回答by broofa
Your problem isn't with jquery, it's in how CORS works. Your beforeSend callback was probably working as expected... but browsers won't send custom headers in preflight requests, no matter what. This is by design; the purpose of the preflight request is to determine what information the useragent (browser) is permitted to send beyond the "simple" stuff defined in the CORS spec. Thus, for the useragent to send any non-simple data (such as your custom header) as part of the preflight request is self-defeating.
您的问题不在于 jquery，而在于CORS 的工作方式。您的 beforeSend 回调可能按预期工作......但浏览器不会在预检请求中发送自定义标头，无论如何。这是设计使然；预检请求的目的是确定允许用户代理（浏览器）发送超出 CORS 规范中定义的“简单”内容的信息。因此，用户代理将任何非简单数据（例如您的自定义标头）作为预检请求的一部分发送是弄巧成拙。
To instruct the useragent to include your custom header in the actual CORS request, include a Access-Control-Allow-Headersheaderin your preflight response. It's worth noting that if you're not overly concerned with what headers the useragent transmits, I believe you can just echo back the value of the Access-Control-Request-Headersrequest header field as the value of the Access-Control-Allow-Headersyou send in the response.
要指示用户代理在实际 CORS 请求中包含您的自定义标Access-Control-Allow-Headers头，请在您的预检响应中包含一个标头。值得注意的是，如果您不太关心用户代理传输的标头，我相信您可以将Access-Control-Request-Headers请求标头字段的值作为Access-Control-Allow-Headers您在响应中发送的值进行回显。
You may also want to include some of the other Access-Control-Allow-*headers defined in the syntax section of the spec.
您可能还希望包含在规范Access-Control-Allow-*的语法部分中定义的一些其他标头。
See also CORS - How do 'preflight' an httprequest?
另请参阅CORS - 如何对 httprequest 进行“预检”？
See also Mozilla's CORS preflight example, which shows these headers in action.
另请参阅Mozilla 的 CORS 预检示例，其中显示了这些头文件的运行情况。
