如何使用 Fetch 和 Express JS 配置服务器 API 以接收请求 Body？

Question

我试图从客户端发送一个 JSON 文件到服务器，但是当我尝试这样做时我收到错误：“No 'Access-Control-Allow-Origin' header is出现在所请求的资源上”。我也收到错误 “POST http://localhost:3000/ net::ERR_FAILED” 和 “未捕获（承诺）TypeError：无法在 index.js:6:1 获取”，但我不确定它们是否与第一个错误相关或有症状。我正在使用 localhost:8000 到运行我的前端。

客户

let data = 
{
    'subject': 'test'
}

fetch('http://localhost:3000',
{
    method : 'POST',
    headers: {'Content-Type' : 'application/json'},
    body : JSON.stringify(data)
})
.then(response => response.json()).then(data => console.log(data));

服务器

const express = require('express');
const app = express();
app.use(express.json());

const port = 3000;

app.post('/', (req, res) => 
{
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
    console.log("Success");
});

app.listen(port);

我对连接网站的前端和后端所涉及的概念不熟悉，但我想了解一个项目的方法。我开始按照教程建议将响应 header "Access-Control-Allow-Origin : http://localhost:8000" 设置为服务器端的响应，这对 GET 请求非常有效。但是当我尝试对 POST 请求执行相同操作时，我开始收到错误消息。

当我在没有 header 或 body 的情况下发送 POST 请求时，它工作正常，我什至能够收到没有错误的响应。我还尝试使用“Access-Control-Allow-Origin" header，但同样的问题。

我附上了完整的错误信息以备不时之需。我是 post 帮助论坛的新手，所以如果以后需要更多信息或更好的写作方式或 post 我的问题，请告诉我；我想修理它。谢谢！

Errors Image

Answer 1

您的客户端运行在本地主机端口 8000 上，而您的后端运行在本地主机端口 3000 上，这导致 Cross Origin Resource Sharing (CORS) 问题。

基本上，应用程序上的 Javascript 运行默认情况下只能与同源服务器通信。

解决这个问题的一个简单方法是使用 Node cors 中间件。

运行 npm i cors

然后在您的服务器中：

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

这应该允许来自其他来源的请求。

编辑：进一步研究了您的问题，看起来您的原始代码无法正常工作的原因是服务器没有响应 SO 上的 pre-flight request. I was able to get your code working on my machine following this 。

这是服务器现在的样子：

const express = require('express');
const app = express();
app.use(express.json());

const port = 3000;

app.options('/', (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', '*');
  res.setHeader("Access-Control-Allow-Headers", "*");
  res.end();
});

app.post('/', (req, res) => 
{
    console.log("Success");
});

app.listen(port);

如何使用 Fetch 和 Express JS 配置服务器 API 以接收请求 Body？

How to Configure Server API to Receive a Request Body Using Fetch and Express JS?

javascript

localhost

cors

express

fetch-api