NodeJS Express和ReactJS的CORS错误[重复]

Posted 2023-03-04

【中文标题】NodeJS Express和ReactJS的CORS错误[重复]

【英文标题】：CORS error with NodeJS Express and ReactJS [duplicate]

【发布时间】：2019-08-26 15:57:54

【问题描述】：

在此之前，我想说的是，我在 *** 上阅读了大约 12 个类似的问题，但没有一个能帮助我解决我的问题，而且大多数答案都不清楚，所以我相信这个问题是值得一问，我也只是个初学者。

环境：

我有一个在端口3000 上的localhost 上运行的react 应用程序和一个在端口8000 上的Express 服务器。我的服务器：

const express = require('express');
const app = express();

const port = 8000;

app.post('/register', (req, res) => 
    res.send(JSON.stringify(test: 'HELLO!'));
);

const server = app.listen(port, () => console.log('Listening on port', server.address().port));

和客户：

static register(username, password) 
    return fetch('http://localhost:8000/register', 
      method: 'POST',
      body: JSON.stringify(username, password),
      headers: 'Content-Type': 'text/plain'
    ).then(response => console.log(response));
  

发送此请求时，我会收到以下错误消息：

无法加载http://localhost:8000/register：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:3000' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

经过一番研究，我尝试了一些解决方案： 在我的服务器上的“POST”之前添加这个中间件：

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();
);

它没有帮助，所以我尝试了 node CORS 包，但它仍然没有解决我的问题。但是发生了一些变化：我不再收到此错误消息，而是记录了响应，但我没有收到从服务器发送的对象，而是收到了某种“错误对象”：

bodyUsed: false
headers: Headers 
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:8000/register"

但是，当我在 Chrome 中打开一个网络选项卡时，我看到响应是我所期望的 test: HELLO!，因此 Chrome 正在更改某些内容，因此我禁用了 Chrome 安全性，但它仍然在记录相同的错误对象。所以在尝试了所有这些之后，我无法让我的代码工作，所以任何人都可以完全回答如何将请求从 React 应用程序发送到 express 服务器而不会出现 cors 错误？

完整的服务器代码：

const express = require('express');
const cors = require('cors');
const app = express();

const port = 8000;

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();
);

app.post('/register', (req, res) => 
    res.send(JSON.stringify(test: 'HELLO!'));
);

const server = app.listen(port, () => console.log('Listening on port', server.address().port));

【问题讨论】：

您能否展示一下您是如何使用cors 中间件的？因为只要正确设置，您就不应该收到任何与CORS 相关的错误。无论如何，您所在的路由不是设置 CORS 的正确方法，您通常希望在设置 OPTIONS 方法的标头后结束请求。

我已经更新了，我的问题。我已经得到了答案，但是您仍然可以解释一下，为什么这不是设置 CORS 的正确方法，我刚刚开始学习，所以它真的很有帮助。

【参考方案1】：

我认为您的整个请求都运行良好..这就是您收到status: 200 的原因。问题是您如何在客户端处理请求。应该是

static register(username, password) 
    return fetch('http://localhost:8000/register', 
      method: 'POST',
      body: JSON.stringify(username, password),
      headers: 'Content-Type': 'text/plain'
    )
    .then(response => response.json())
    .then(json => console.log(json));
  

您提到的“错误对象”只是完整的响应，其中包含您实际请求的json，以及一些元数据。

【讨论】：

你说得对，它对我有用。谢谢你的回答。