CORS策略拦截带query/params的axios GET/POST请求该如何解决？

1 先修正已知代码错误 #

你当前的代码存在多处会直接导致CORS配置不生效的问题：

• 变量名拼写错误：定义的配置变量名为corsOptions，但引用时写为corsOption，少了末尾的s
• 括号缺失：app.use(cors(corsOption) 缺少右闭合括号
• 配置键不符合中间件规范：express的cors中间件不需要写完整的响应头名作为配置键，需要替换为中间件指定的配置字段
  修正后代码：

var corsOptions = {
    origin: "http://localhost:3000",
    allowedHeaders: "Origin, X-Requested-With, Content-Type, Accept, Authorization",
    methods: "PUT, GET, POST, DELETE, OPTIONS"
}
// 修正变量名和括号
app.use(cors(corsOptions))

2 处理OPTIONS预检请求 #

浏览器发送带路径参数、查询参数或者自定义头的请求时，会先发送OPTIONS类型的预检请求，只有预检请求通过才会发送实际请求。你需要在所有路由定义之前添加OPTIONS请求的统一处理逻辑：

app.options('*', (req, res) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.sendStatus(200);
})

3 排查路由匹配问题 #

如果后端没有匹配/data/delete、/data/delete/:id这类路径的路由规则，会返回404/500状态码，错误响应默认不会携带CORS响应头，浏览器也会判定为CORS拦截。你可以在对应路由中添加日志，确认请求是否正常进入路由处理逻辑。

4 本地开发临时替代方案 #

如果需要快速调试，可以选择以下两种方案绕开跨域限制：

• 前端配置代理：React项目可在package.json中添加"proxy": "http://localhost:5000"，Vue项目在vue.config.js的devServer中配置代理规则，前端请求直接写相对路径即可，不需要带完整的服务端地址
• 启动浏览器跨域模式：给Chrome添加启动参数--disable-web-security --user-data-dir，临时关闭同源策略用于调试

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