CORS：对预检请求的响应未通过访问控制检查 - 如何在 localhost 上解决它？

Posted 2023-03-04

【中文标题】CORS：对预检请求的响应未通过访问控制检查 - 如何在 localhost 上解决它？

【英文标题】：CORS: response to preflight request doesn't pass access control check - How to solve it on localhost?

【发布时间】：2021-09-07 07:39:32

【问题描述】：

我是 javascript 的初学者，我正在尝试编写一个脚本来检查一个网站，比如说https://example.comreturns 404 status code 或 200，根据结果，我会访问它还是不访问它。我在前端这样做。我没有服务器端，因为该网站是一个不使用数据库的静态网站。 我正在使用 XMLHttpRequest 执行此操作。

 url = $("#foo").attr("href")
    function UrlExists(ur)
    
        var http = new XMLHttpRequest();
        http.open('GET', ur, true);
        http.setRequestHeader("Access-Control-Allow-Origin", "http, https");
        http.setRequestHeader("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTONS");
        http.setRequestHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization")
        http.send();
        console.log(http.status);
    
    UrlExists(url)

问题是当我运行这个脚本时，抛出了以下异常：

从源“null”访问位于 'http://example.com' 的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求中不存在“Access-Control-Allow-Origin”标头资源。

从我目前阅读的内容来看，这更像是 CORS 问题而不是 JavaScript，到目前为止我找不到解决方案。

谁能帮我解决这个问题并解释我为什么？ 我已经检查了关于 SO 的其他问题，到目前为止，我没有找到可行的解决方案。如果有的话，我也愿意接受其他解决方案。非常感谢！

非常感谢您的宝贵时间！

更新 1： 不幸的是，我仍在努力解决这个问题。我已经阅读了很多关于 CORS 政策的内容，问题是我无法理解我应该如何安全地允许标头通过请求从我的服务器发送到另一个服务器。 资源是：一个 html 页面和其中的一些 JS 代码。正如我上面提到的，我正在尝试从我的网站向另一个网站发送请求以检查该网站的状态，如果 404 弹出，我想重定向我的用户。

【问题讨论】：

嘿，只是好奇，你能让它工作吗？ Will 很高兴知道你可以！

嘿！很高兴收到你的来信！不幸的是，一段时间后，我放弃了这个想法。我正在考虑再试一次，让我的头脑清醒。这里更多的是知识空白。我尝试使用 .htaccess 文件，但我没有使用 Apache Server 和 php。我需要阅读更多关于 nginx 的信息。但是你帮助我理解了这个问题！

【参考方案1】：

您需要在 Web 服务器上设置 CORS 标头。出于安全原因，它默认是禁用的。

例如，在 Nginx 中，你可以这样做

add_header Access-Control-Allow-Origin example.com;

如果您使用的托管服务不允许修改网络服务器配置，您可以将所需的标头添加到您的 .htaccess 文件中，如下所示。换句话说，将它放在您拥有 index.html 的项目的根目录中。另外，将权限更改为 644。

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

参考资料：

https://***.com/a/20082724/2777988

https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues

【讨论】：

你好拉克什先生。感谢您的快速回复。关于 CORS 的一些重要见解。但我有一个问题：我的网站没有后端。我做的一切都像旧时尚。我只使用 HTML、CSS 和 JS。没有其他框架。有没有办法在客户端解决它？

为了提供 html、css、j 的服务，您需要一个 Web 服务器。后端是另一回事。无论如何，您必须拥有一个网络服务器

您需要了解，如果没有为您提供静态内容、html、css、js 的网络服务器，任何人都无法访问您的网站。

是的，你是对的。我的错。我有一个网络服务器，我正在使用 WinSCP。因此，解决方案是创建一个允许 CORS 策略的 js 文件。我会试试看。非常感谢！

解决方案是将 CORS 标头添加到您的网络服务器配置 httpd.conf 或 nginx.conf 取决于您使用的内容。