axios发起POST请求报跨域错误，更换fetch/XHR仍触发如何解决？

你遇到的是浏览器同源策略触发的CORS跨域限制问题，该限制的校验逻辑在服务端响应返回后由浏览器执行，和前端使用的请求工具无关，因此切换axios、fetch API、XHR都无法解决问题，必须调整Node服务端的响应配置。

解决方案（Node服务端配置） #

方案1：使用cors中间件（Express框架推荐） #

这是最简单快捷的配置方式，步骤如下：

• 第一步：安装cors依赖
  npm install cors
• 第二步：在服务端入口文件中引入并启用中间件

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

// 全局允许所有源跨域访问（开发环境可用，生产环境建议限制源）
app.use(cors())

// 生产环境建议指定允许的前端源，避免接口被任意站点调用
/*
app.use(cors({
  origin: 'https://你的前端站点域名.com'
}))
*/

// 你的原有业务路由写在cors配置之后
app.post('/blog/postBlog', (req, res) => {
  // 原有业务逻辑
})

方案2：手动设置CORS响应头 #

如果不想引入第三方依赖，可以手动编写全局中间件配置跨域头：

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

// 全局CORS配置中间件
app.use((req, res, next) => {
  // 允许的请求源，*表示允许所有，生产环境替换为实际前端域名
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许的请求头类型
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  // 预检请求直接返回200
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200)
  }
  next()
})

// 原有业务路由

额外注意事项 #

• 你当前的请求携带了文件参数，属于multipart/form-data类型请求，不要在axios中手动设置Content-Type请求头，axios会自动生成带boundary的请求头，手动配置反而会导致文件上传失败。
• 开发阶段临时测试也可以使用前端代理的方式绕开跨域：比如Vue项目配置devServer.proxy，React项目在package.json中添加proxy: "https://blooming-escarpment-74540.herokuapp.com"，但该方案仅适用于本地开发，生产环境仍需要服务端配置CORS。

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