POST接口配置Access-Control-Allow-Origin后仍报CORS跨域错误如何解决

带Content-Type: application/json等特征的POST请求不属于CORS简单请求，浏览器会在正式发送POST请求前，先向同路径发送一个OPTIONS方法的预检请求，校验服务端是否允许跨域。你当前的代码存在两个核心问题：

• 仅在POST请求的成功回调中设置了Access-Control-Allow-Origin响应头，完全没有处理OPTIONS预检请求，预检请求根本拿不到CORS相关头，直接被浏览器拦截，根本走不到POST的业务逻辑
• 接口报错的catch分支中没有设置CORS头，一旦业务逻辑报错返回500，同样会触发跨域拦截

之前GET请求配置生效，是因为普通GET属于CORS简单请求，不会触发OPTIONS预检，请求直接到达服务端后，你在响应里加的CORS头可以正常被浏览器校验通过。

方案1：手动配置全局CORS中间件（无需额外依赖） #

在所有路由定义的最前面添加全局中间件，保证所有请求（包括OPTIONS预检、业务报错响应）都能带上正确的CORS头：

// 所有路由前添加该中间件
app.use((req, res, next) => {
  // 允许跨域的源，本地调试可以用*，生产环境建议替换为前端实际域名
  res.header("Access-Control-Allow-Origin", "*");
  // 允许前端携带的请求头，根据你实际业务用到的头增删即可
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  // 允许的跨域请求方法
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  // 直接响应OPTIONS预检请求，返回204无内容状态码，不进入后续业务逻辑
  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }
  next();
});

添加后你原有POST接口中单独写的res.header("Access-Control-Allow-Origin", "*")可以删掉，全局中间件会自动处理所有响应的CORS头。

方案2：使用框架官方CORS中间件（Express场景推荐） #

如果你用的是Express框架，可以直接使用官方维护的CORS中间件，不用手动写头配置：

1. 安装依赖
   npm install cors
2. 在所有路由前全局引入使用

const cors = require('cors');
// 全局开启跨域，默认配置等价于允许所有源、所有常用请求方法和头
app.use(cors());

配置完成后重启服务端，打开浏览器开发者工具的网络面板，能看到先发出的OPTIONS请求返回204状态码，且响应头中包含你配置的CORS相关字段，后续的POST请求就可以正常发送了。

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