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

Question

在此之前，我想说的是，我在 StackOverflow 上阅读了大约 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));

Answer 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，以及一些元数据。