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

Question

我是 JavaScript 的新手，我正在尝试编写一个脚本来检查网站是否为 https://example.comreturns 404 状态代码或 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' header 出现在请求的资源上。

根据我目前的阅读，这是 CORS 问题而不是 JavaScript，到目前为止我找不到解决方案。

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

非常感谢您的宝贵时间！

更新 1： 不幸的是，我仍在为这个问题而苦苦挣扎。我已经阅读了很多关于 CORS 策略的内容，问题是我不知道我应该如何安全地允许 headers 通过请求从我的服务器发送到另一个服务器。资源是：一个HTML页面和里面的一些JS代码。正如我上面提到的，我正在尝试从我的网站向另一个网站发送请求以检查该网站的状态，如果弹出 404，我想重定向我的用户。

Answer 1

您需要在您的网络服务器上设置 CORS header。出于安全原因，默认情况下禁用它。

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

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

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

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

参考文献：

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

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

Answer 2

我正在使用 Flutter 和 Nodejs（在 HEROKU 中），这对我有用：

颤动：

//FLUTTER

...

    final headers = <String, String>{
      'Content-Type': 'application/json',
      "Access-Control-Allow-Origin": "*",
    };

  final resp = await http.post(//here we make the req

      Uri.parse(url), 
      body: convert.jsonEncode(body),
      headers: headers,
    );

///

HEROKU 中的服务器 NodeJS：

///SERVER NODEJS IN HEROKU
const express = require('express');
const cors = require("cors"); //this is a library to config easily cors
const app = express();


app.use(express.json());
app.use(cors({ origin: true })); // enable origin cors

app.post('/',async(req,res)=>{
...

///

然后我解决了混合内容（使用 heroku）和 cors 问题

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

CORS: response to preflight request doesn't pass access control check - How to solve it on localhost?

javascript

xmlhttprequest

access-control

cors