Node/Express对接React时GET无CORS错误但POST请求跨域报错如何解决？

问题原因 #

你遇到的CORS报错是因为带Content-Type: application/json的POST请求属于非简单CORS请求，浏览器会先发送OPTIONS方法的预检请求验证服务端权限，而你当前仅在GET路由中配置了CORS响应头，既没有处理预检的OPTIONS请求，也没有为POST路由配置CORS头，因此预检请求校验失败。

解决方案（原生Express配置，无需第三方包） #

不需要修改前端POST请求代码，仅需调整服务端配置即可：

1. 新增全局CORS处理中间件 #

在你的Express入口文件（通常为app.js/server.js）中，所有路由挂载之前添加如下中间件，统一处理所有请求的CORS头：

const express = require('express');
const app = express();

// 解析JSON请求体，后续POST路由可以直接取req.body
app.use(express.json());

// 全局CORS配置，放在所有路由之前
app.use((req, res, next) => {
  // 允许访问的前端源，本地开发填http://localhost:3000，上线替换为正式前端域名
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  // 允许的请求头，需包含你业务中用到的头字段（这里你用到了Content-Type）
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  // 预检请求直接返回200状态码
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// 后续挂载你原来的testAPI路由
const testAPIRouter = require('./你的路由文件路径');
app.use('/testAPI', testAPIRouter);

app.listen(9000, () => console.log('服务启动在9000端口'));

2. 补充POST路由逻辑 #

你当前的路由文件仅定义了GET接口，需要新增POST接口处理前端的POST请求：

const express = require("express");
const router = express.Router();

router.get("/", (req, res, next) => {
    console.log(req.url);
    res.send("API is working properly");
});

// 新增POST接口
router.post("/", (req, res, next) => {
    console.log('收到POST数据：', req.body);
    res.json({
        code: 0,
        msg: 'POST请求处理成功',
        data: req.body
    });
});

module.exports = router;

上线注意事项 #

上线部署时，仅需要将Access-Control-Allow-Origin的值替换为你前端正式部署的域名即可（例如https://www.your-frontend-domain.com），不需要其他额外配置，也不需要使用CORS浏览器扩展。

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