IE CORS - 即使指定了标头，访问控制允许标头错误答案

【问题标题】：IE CORS - Access-Control-Allow-Headers error even though headers are specifiedIE CORS - 即使指定了标头，访问控制允许标头错误
【发布时间】：2019-01-22 05:52:48
【问题描述】：

我目前在网页上向 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 请求，以下是一些标头：

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

飞行前的反应表明：

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

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

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

谢谢，詹姆斯

【问题讨论】：

您需要针对您未创建但您知道支持 CORS 的服务测试 IE。无法判断这里出了什么问题。
@mpm 我认为问题与添加到请求中的额外标头有关。就 CORS 支持而言，此 Web 服务支持它。唯一的问题是现在指定了另一个标头。如上面的飞行前请求中所示，“x-custom-header”被指定为允许的标头。但是，在进行 AJAX 调用时，似乎无法找到它。如果您知道我可以用来测试的网络服务，请告诉我。

标签： javascript internet-explorer cors cross-domain access-control

【解决方案1】：

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

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

“网络”选项卡上的所有开发工具（包括 IE）都将组合在一起的标头显示为逗号分隔列表，即使它们在技术上是同名的不同标头。这就是混乱的来源。

这是在使用 Postman 模拟飞行前请求并看到标头作为单独的项目返回时发现的。

因此，要解决此问题，请确保 CORS 标头（例如“access-control-allow-headers”）包含逗号分隔的列表，而不是必需的标头，因为 IE 只会接受发送的第一个。例如，响应应该是：

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

【讨论】：

我想我遇到了同样的问题。您如何验证 Postman 的飞行前请求中是否存在具有相同密钥的多个标头？
@ibrin 很抱歉，如果这不是 100% 正确，但如果您更改设置标题的顺序，它们也会在 IE 中更改。在 Postman 中，如果你发送一个请求并在 Postman 中查看响应头，会有多个具有相同 Key 的头，而不是只有一个具有多个值。

【解决方案2】：

我们在 Internet Explorer 和 Access-Control-Allow-Methods 中遇到了 CORS 问题，它们与 OPTIONS 响应中的允许“*”不兼容。修复是更改我们 API 网关中的选项响应以使用所有方法

【讨论】：