如何在CORS预检OPTIONS请求中发送自定义标头？

Question

我正在尝试发送一个JSON payload的CORS请求，我可以控制服务器和客户端。

我正在遵循这里的步骤：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

服务器有一个必须随每个请求一起发送的自定义header。因此，这个自定义header使得请求变得“不简单”，因此请求必须通过OPTIONS请求进行预检。

我可以看到jQuery在进行OPTIONS请求，但它没有发送自定义header。

我尝试的方法：

• 使用beforeSend选项：https://api.jquery.com/jquery.ajax/
• 使用AJAX prefilter：https://api.jquery.com/jquery.ajaxPrefilter/

在这两种情况下，浏览器都没有发送自定义header。

我正在使用FF 17.0.1，jQuery 1.8.3。

- mooreds

---

展示你尝试设置头部的代码。 - Barmar

选项 headers: { Header-name: value } 无效？ - Barmar

引起问题的标题名称是什么？我同意Barmar的观点，展示所有JS代码和请求/响应可以帮助调试。 - monsur

我已经擅自更新了标题，以更准确地反映您所询问的问题。希望这没问题。 :) - broofa

Answer 1

你的问题不在于jquery，而是在于CORS如何工作。你的beforeSend回调可能正在按预期工作...但是无论如何，浏览器都不会在预检请求中发送自定义标头。这是出于设计考虑；预检请求的目的是确定用户代理（浏览器）在CORS规范中定义的“简单”内容之外可以发送什么信息。因此，为了让用户代理将任何非简单数据（例如您的自定义标头）作为预检请求的一部分发送，这是毫无意义的。

要指示用户代理在实际的CORS请求中包含您的自定义标头，请在预检响应中包含一个Access-Control-Allow-Headers标头。值得注意的是，如果您不过分关心用户代理传输的标头，我认为您只需将Access-Control-Request-Headers请求头字段的值回显为响应中发送的Access-Control-Allow-Headers的值。

您还可以包括一些规范语法部分中定义的其他Access-Control-Allow-*标头。

另请参见CORS - How do 'preflight' an httprequest?

另请参见Mozilla的CORS预检示例，其中展示了这些标头的实际应用。

- broofa

---

谢谢。在预检响应发生后，我的事情已经开始运作了，只是OPTIONS调用存在问题。看起来我必须使用基于服务器的解决方法。 - mooreds

是的，OPTIONS请求被拒绝了，因为它没有自定义头。在Chrome上，其余数据仍然被发送（可能是因为我正在本地主机上开发，不确定），但对于Firefox来说，一旦OPTIONS请求失败，其余请求也会失败。 - mooreds

到目前为止，我能想到的一个解决方法是禁用 OPTIONS 请求的自定义头检查。显然，如果您无法控制服务器，这种方法将行不通，因此我很乐意听取其他建议。（这是一个回答，但已被删除） - mooreds

你是否曾经找到过一种解决方案，而不需要重新配置服务器（即使你无法访问它）？ - Murray Rowan

@MurraySmith 没有，我不得不在服务器端进行更改。虽然我不确定CORS在过去几年中是否有所改变。 - mooreds