对预检请求的响应未通过访问控制检查 (JavaScript)答案

【问题标题】：Response to preflight request doesn't pass access control check (JavaScript)对预检请求的响应未通过访问控制检查 (JavaScript)
【发布时间】：2018-11-05 18:47:48
【问题描述】：

我正在尝试使用 XMLHTTPRequest 进行 post 调用，并收到以下消息：

访问 XMLHttpRequest 在 'https://some-link' 来自原点 “null”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin” 请求的资源上存在标头。

有类似的线程说要添加 CORS 标头，我已经完成了。

我很好奇的是，这些完全相同的代码在转换为 AJAX 时可以正常工作（无需让其他人通过 CORS 配置）。既然 AJAX 只是一个由 JavaScript 构建的框架，为什么在没有 AJAX 且完全由 JavaScript 编写的情况下会出现此消息？

var xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.send(data)

对比

$.ajax({
    type: 'POST',
    url: 'url',
    data: data
});

后者工作正常。 ajax 中有哪些额外/隐藏的实现？

【问题讨论】：

标签： javascript ajax

【解决方案1】：

打开 DOM Inspector，点击请求，找出这两个请求之间的区别。会有区别的。

那个“空”的来源可能是因为你使用带有属性沙箱的 IFRAME，对吧？要解决这个问题，您需要确保

请求的资源（在网络面板中）在 RESPONSE 标头中返回“Access-Control-Allow-Origin”（您说您已经这样做了）
请记住，预检检查使用 OPTIONS 请求（既不是 GET 也不是 POST），因此请确保您的服务器在使用 OPTIONS 请求请求资源时发送上述标头。如果是这种情况，您应该在 CORS 错误之前在控制台中看到一些关于 OPTIONS 请求的错误消息。（例如 NGINX 默认以错误 405 响应 OPTIONS 请求。）

你可以像这样使用命令行 curl 来检查 curl 'https://www.example.com/my-url-that-fails-here/' -X OPTIONS -H 'Pragma: no-cache' -H 'Access-Control-Request-Method: GET' -H 'Origin: null' -H 'Accept-Encoding: gzip, deflate, br' -H 'Accept-Language: en-US,en' -H 'User-Agent: Mozilla/5.0' -H 'Accept: */*' -H 'Access-Control-Request-Headers: x-requested-with' --compressed -D - -O /dev/null 这应该非常接近真实的浏览器。

【讨论】：