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

Question

我正试图将JSON文件从客户端发送到服务器，但当我尝试这样做时，我得到了错误："在请求的资源上不存在"访问控制允许来源"头；。我也有错误"岗位http://localhost:3000/net:：ERR_FAILED"one_answers"Uncaught(在promise中(TypeError:未能在索引处提取。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);

我对连接网站前端和后端的概念很陌生，但我想学习如何进行项目。我开始遵循一个教程，建议设置响应头"；访问控制允许来源：http://localhost:8000"服务器端的响应，这对于GET请求非常有效。但是，当我尝试对POST请求执行同样的操作时，我开始收到错误。

当我发送没有标题或正文的POST请求时，它运行良好，我甚至可以接收到没有错误的响应。我还尝试添加"；访问控制允许标头：内容类型"；以及"；内容类型：application/json"在服务器上用"；访问控制允许起源"；标头，但针对相同的问题。

我附上了完整的错误，以防有帮助。我刚开始在帮助论坛上发帖，所以如果将来需要更多信息，或者有更好的方式来写或发布我的问题，请告诉我；我想修理一下。谢谢！

错误图像

Answer 1

您的客户端在localhost端口8000上运行，而后端在localhost港口3000上运行，这导致了跨源资源共享(CORS(问题。

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

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

运行npm i cors

然后在您的服务器中：

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

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

编辑：再次研究了你的问题，看起来你的原始代码不起作用的原因是服务器没有响应飞行前的请求。我能够让你的代码在我的机器上工作，按照这个答案在SO.

这就是服务器现在的样子：

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