使用axios.post带data参数请求express接口出现CORS错误如何解决

问题原因 #

• 响应头拼写错误：后端代码中设置跨域头时，把Access-Control-Allow-Headers和Access-Control-Allow-Methods错误拼写为Aceess-Control-*，多了一个多余的字母e，导致浏览器无法识别正确的跨域许可头。
• 未处理OPTIONS预检请求：当POST请求携带JSON格式的data参数时，属于非简单请求，浏览器会先自动发送一个OPTIONS类型的预检请求，探测服务端是否允许该跨域请求。你当前的后端代码只处理了POST类型的请求，没有对OPTIONS请求做响应，预检失败就会抛出跨域错误。不带data的POST请求和GET请求属于简单请求，不需要预检，因此可以正常访问。

解决方法 #

方案1：手动修复跨域配置 #

修正跨域头的拼写错误，同时新增OPTIONS请求的处理逻辑，建议把跨域配置提取为全局中间件，避免每个路由重复设置：

let express=require('express');
let app=express();
app.use(express.json());

// 全局跨域中间件
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "*");
  res.setHeader("Access-Control-Allow-Methods", "*");
  // 处理预检请求直接返回成功状态
  if(req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

app.post('/wrong',(req,res)=>{
  const r=JSON.stringify(req.body);
  res.send(r);
});
app.listen(3000,()=>{
  console.log('3000 listening...');
});

方案2：使用官方cors中间件（更稳定） #

直接安装express官方维护的cors包，自动处理所有跨域相关逻辑，避免手动拼写错误和漏处理场景：

1. 安装依赖：npm install cors
2. 代码中引入使用：

let express=require('express');
let cors = require('cors');
let app=express();
// 全局启用跨域
app.use(cors());
app.use(express.json());

app.post('/wrong',(req,res)=>{
  const r=JSON.stringify(req.body);
  res.send(r);
});
app.listen(3000,()=>{
  console.log('3000 listening...');
});

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