环境：

Question

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

环境：

我有一个运行在端口localhost上的3000上的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”标头。因此，不允许访问来源“ 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();
});

它没有帮助，所以我尝试了节点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应用程序向快递服务器发送请求而不会出现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以及一些元数据。

NodeJS Express和ReactJS的CORS错误

环境：

1 个答案: