如何解决json-server中POST请求CORS相关500错误问题？

先解决核心：500内部服务器错误 #

500错误的最常见原因是db.json结构不符合json-server要求：

• 必须确保db.json中存在messages数组，这是POST请求目标端点对应的数据源：

{
  "messages": []
}

json-server要求POST到的端点必须对应一个数组，否则会直接返回500错误。

修正中间件配置与启动命令 #

你之前的操作存在两处关键错误：

1. 命令行参数拼写错误：--Middlewares需改为小写的--middlewares
2. server.js写法无效：没有正确导出中间件逻辑，以下是两种可行的配置方式：

方式1：使用json-server默认CORS配置 #

修改server.js为：

const jsonServer = require('json-server');
// 启用默认CORS配置（默认即为允许跨域，noCors: false可省略）
const middleware = jsonServer.defaults({ noCors: false });

module.exports = middleware;

方式2：自定义CORS规则（更灵活） #

先安装cors包：

npm install cors

再修改server.js：

const cors = require('cors');

// 导出中间件函数，允许所有来源的跨域请求
module.exports = function (server) {
  server.use(cors({
    origin: true, // 允许任意请求来源
    credentials: true // 支持携带凭证（如Cookie）
  }));
};

正确启动命令 #

npx json-server --watch db.json --port 3002 --middlewares server.js

优化请求代码（可选，便于排查） #

你的请求逻辑基本正常，可以补充状态判断，快速定位问题：

async function handleSubmit(e){
    e.preventDefault();
    try{
        const connection = await fetch("http://localhost:3002/messages", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                name: name,
                messages: messages
            }),
        });
        // 新增：检查响应状态，快速捕获非200的错误
        if (!connection.ok) {
            throw new Error(`请求失败：HTTP状态码 ${connection.status}`);
        }
        const data = await connection.json();
        console.log(data);
    }catch(error){
        console.log(error);
    }
}

关于Referrer Policy提示 #

这个提示是浏览器的安全策略通知，不是导致请求失败的直接原因。只要CORS配置正确、服务器返回正常状态，该提示不会影响请求功能。

内容的提问来源于stack exchange，提问作者Priscila