NodeJS Express 和 ReactJS 的 CORS 问题

Question

我在使用 NodeJS Express 和 ReactJS 时遇到了一些 CORS 问题。请帮帮我。

现在，我有前端（http://locahost:3000）和后端（http://locahost:4000）使用不同的PORT。 前端使用 ReactJS 的 3000 端口，后端使用 NodeJS Express 的 4000 端口。

前端API调用源码

axios.get("/tube/latestted",
    {
        headers: {
            "Content-Type": "application/json",
        },
    })
    .then(response => {
        console.log(response);
    });

后端CORS设置源码

app.all('/*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');

  next();
});

或

var cors = require('cors');
app.use(cors());

但即使我设置了CORS设置，它仍然存在与吹错误消息相同的问题。

从源“http://localhost:3000”访问“http://localhost:4000/tube/latestted”处的 XMLHttpRequest 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

Answer 1

在您的客户端请求上使用 Content-Type: application/json 会使您的跨源请求成为需要预飞行的请求，并且客户端将向您服务器上的该路由发送一个 OPTIONS 请求，本质上是询问您的服务器是否允许这样做对该路由的跨源调用。要使这种类型的请求在浏览器中成功，您需要一个用于返回 200 状态的 OPTIONS 动词的处理程序，如下所示：

app.options("/tube/latestted", (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');        
    res.sendStatus(200);
});

但是，一个更简单的解决方案可能只是从您的客户端请求中删除自定义 Content-Type 标头。 Content-Type 标头指定您通过请求发送的内容类型，而不是您期望返回的内容类型。由于您没有使用 GET 请求发送数据，因此您不需要该标头，正是该标头使您的 Ajax 调用从 Simple Request 变为需要 OPTIONS 预检的 Pre-Flighted Request。

在没有预检的情况下唯一允许的 Content-Type 标头值是：

application/x-www-form-urlencoded
multipart/form-data
text/plain

您会注意到application/json 未列出，因此使用该内容类型会强制浏览器执行您的服务器未处理的预检。

所以，首先要尝试将客户端请求更改为：

axios.get("/tube/latestted")
  .then(response => {
     console.log(response);
  }).catch(err => {
     console.log(err);
  });

如果这不起作用，那么您应该通过查看浏览器中的 Chrome 调试器网络选项卡来进一步诊断，并准确查看浏览器运行该 Ajax 调用时发生的情况。您可能会看到一个以 404 或其他非 200 状态返回的 OPTIONS 请求。如果是这种情况，那么您需要在您的服务器中添加一个特定的 OPTIONS 处理程序，该处理程序为该路由返回 200 状态。您有将设置 CORS 标头的中间件，但您在该路由中调用 next()，因此由于没有其他匹配的 OPTIONS 路由处理程序，它可能会落入 404 处理程序，因此浏览器认为 OPTIONS 请求失败。