Postman可正常调用Fruityvice接口但localhost:3000请求报CORS错误

问题根源 #

CORS是浏览器专属的同源安全限制，Postman不属于浏览器环境，没有这项限制，所以可以正常请求。你修改mode参数没有效果的原因如下：

• mode: 'cors'是fetch请求的默认值，调整这个参数等于没有修改配置，当然解决不了跨域问题
• mode: 'no-cors'的作用是允许发送不需要读取返回结果的跨域请求，返回的是不透明响应，你无法读取响应体内容，同时response.ok会固定为false，所以才会抛出你遇到的报错，这个参数完全不适用你需要读取API返回数据的场景

可落地的解决方向 #

• 本地开发阶段最简便方案：配置前端开发服务代理
  现在主流的前端框架（React/Vue/Angular等）的开发服务器都自带代理功能，你只需要加几行配置就能解决：

  • 如果你用的是Create React App创建的项目，直接在package.json里加一行 "proxy": "https://www.fruityvice.com"，之后把你的请求地址改成/api/fruit/all即可，开发服务器会自动把请求转发到目标API地址，不存在跨域问题
  • 如果你用的是Vue创建的项目，在vue.config.js的devServer.proxy字段下配置对应的转发规则即可，原理和上面一致

• 临时测试方案：使用公共CORS代理
  只需要把你的请求地址改成https://cors-anywhere.herokuapp.com/https://www.fruityvice.com/api/fruit/all即可临时解决跨域问题，但是公共代理稳定性差、限速高，仅适合临时调试使用，绝对不能用于生产环境

• 生产环境方案：自建后端中转服务
  因为你没法修改第三方Fruityvice API的CORS配置，唯一稳定的生产方案是在你自己的后端加一层中转：你前端请求同源的自己的后端接口，后端再去调用Fruityvice的API拿到结果后返回给前端，后端请求没有跨域限制，完全不会有这个问题

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