为何Axios请求出现No 'Access-Control-Allow-Origin'错误，Postman却正常？

为什么Postman能成功，浏览器不行？ #

浏览器有同源策略限制，跨域请求会先发送OPTIONS预请求，要求服务器返回CORS相关响应头（比如Access-Control-Allow-Origin），如果服务器没配置，就会触发你看到的错误。而Postman是独立客户端工具，不受浏览器同源策略约束，所以直接请求能成功。

具体解决办法： #

• 后端配置CORS（推荐，生产环境必须）
  让后端开发在响应中添加必要的CORS头：

  • 核心头：Access-Control-Allow-Origin: http://localhost:3000（只允许你的前端域名，更安全），测试阶段也可以用*（允许所有来源，生产环境禁用）
  • 还要处理OPTIONS预请求，返回Access-Control-Allow-Methods（允许的请求方法，比如POST、OPTIONS）和Access-Control-Allow-Headers（允许的请求头），确保预请求能通过。

• 前端本地代理（开发环境用）
  如果你用React、Vue这类框架，可以配置本地代理绕过浏览器跨域：

  • React项目：在package.json里加一行"proxy": "http://teamdev.shop"，之后前端请求/questions/write会被自动代理到目标地址，浏览器认为是同源请求，就不会触发CORS错误。
  • Vue项目：在vue.config.js里配置devServer.proxy，规则类似，把目标域名设为代理地址。

• 浏览器插件临时调试（仅开发测试）
  可以用Chrome的「Allow CORS: Access-Control-Allow-Origin」这类插件，开启后能暂时绕过浏览器的CORS检查，但这个方法只能自己调试用，绝对不能给用户用，也不能用于生产环境。

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