MERN应用使用POST方法触发CORS错误，如何解决？

错误信息 #

从源'http://localhost:3000'访问'http://localhost:8000/register'的请求被CORS策略阻止，请求的资源上不存在'Access-Control-Allow-Origin'头。若透明响应符合需求，可将请求模式设为'no-cors'以禁用CORS。

问题分析 #

前端代码问题 #

register.js中fetch请求的body直接传入JS对象，未序列化为JSON字符串，导致浏览器无法正确识别请求格式，同时可能引发CORS校验失败。

后端代码问题 #

1. app.listen()放在路由定义之后，导致/register路由未被服务器注册，请求返回404，默认404响应未携带CORS头，触发报错。
2. 手动设置CORS头容易遗漏预检请求（OPTIONS）处理，存在潜在逻辑漏洞。

修复步骤 #

1. 前端代码修复 #

将fetch的body用JSON.stringify()转换为JSON字符串：

// this function executes on click of Register button
const handleSubmit = (e) => {
    e.preventDefault();
    fetch('http://localhost:8000/register', {
        method: 'post',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "hi": "world"
        })
    })
        .then((res) => res.json())
        .then((data) => {
            if(data.status==='success') {
                console.log(data.status)
            }
        })
        .catch(e => console.log(e))
}

2. 后端代码修复 #

步骤1：安装cors包

npm install cors

步骤2：调整代码结构并使用cors中间件

const express = require('express');
require('dotenv').config()
const app = express();
const cors = require('cors');

const port = process.env.PORT;

// 启用CORS中间件，自动处理所有CORS逻辑
app.use(cors());

// 使用express内置的请求体解析（替代body-parser，express 4.16+支持）
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 定义路由（必须在app.listen之前）
app.post('/register', async (req, res) => {
    res.json({
        status: 'success'
    });
})

// 最后启动服务器
app.listen(port, () => {
  console.log('Listening on port ' + port);
});

关键说明 #

• 路由顺序：express服务器启动（app.listen()）后再定义的路由不会被加载，必须确保所有路由和中间件在app.listen()之前配置。
• JSON序列化：发送JSON格式请求时，必须将对象转为字符串，否则Content-Type: application/json头无法生效，后端无法解析请求体。
• cors包优势：自动处理预检请求、自定义源/方法/头等场景，比手动设置CORS头更可靠。

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