javascript - IE CORS - 即使指定了 header ，访问控制允许 header 错误

Question

我目前在网页上向 API 端点提交 AJAX 请求，该端点在 Chrome 和 Firefox 中有效，但在 IE 中无效。

我在 IE 的开发工具中收到的错误消息是:

SEC7123: Request header x-custom-header was not present in the Access-Control-Allow-Headers list.
SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

查看飞行前 OPTIONS 请求，以下是一些 header :

Origin: http://www.example.org
Access-Control-Request-Headers: content-type, accept, x-custom-header
Access-Control-Request-Method: GET

飞行前的 react 表明:

Access-Control-Allow-Headers: content-type, x-custom-header
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Origin: *

发生这种情况后，不会执行 AJAX 请求。
看起来 IE 看​​不到在飞行前请求的响应中返回了 header 。

任何帮助将不胜感激，如果您需要更多信息，请询问。

谢谢，
詹姆士

Answer 1

好的，所以我找到了解决方案。事实证明，IE 强制 header 的值位于逗号分隔列表中，并且飞行前请求使用具有相同键的多个 header 进行响应。 (即使 the W3 says that doing this should be okay )。例如，响应可以指定 Access-Control-Allow-Headers header 两次:

Access-Control-Allow-Headers: content-type
Access-Control-Allow-Headers: accept

网络选项卡上的所有开发工具(包括 IE)都将组合在一起的 header 显示为逗号分隔列表，即使它们在技术上是具有相同名称的不同 header 。这就是困惑的来源。
这是在使用 Postman 模拟飞行前请求并看到 header 作为单独的项目返回时发现的。
因此，要解决此问题，请确保 CORS header (例如“access-control-allow-headers”)包含逗号分隔的列表，而不是必需的 header ，因为 IE 将只接受发送的第一个。例如，响应应该是:

Access-Control-Allow-Headers: content-type, accept