使用fetch请求API失败但Postman可正常调用该如何解决？

问题原因 #

CORS是浏览器独有的同源安全限制策略，Postman属于桌面客户端，不受该规则约束，因此请求可以正常拿到返回结果。两种mode的异常表现分别对应以下逻辑：

• mode: 'cors'报错：你请求的API服务端没有配置CORS响应头，未允许你当前页面的源跨域访问，浏览器会直接拦截响应结果，抛出跨域错误。
• mode: 'no-cors'返回body为null：该模式下返回的是不透明响应，仅可用于不需要读取响应内容的场景（比如静态资源加载、埋点上报），设计上就不允许前端读取响应体、状态码等核心数据，因此你无法拿到Postman中看到的返回内容。

解决方案 #

• 如果你可以控制API服务端：在接口响应头中添加Access-Control-Allow-Origin字段，值配置为你前端页面的源即可（开发测试阶段可临时设为*，生产环境请替换为实际的前端域名，避免安全风险）。如果请求携带身份凭证，还需额外配置Access-Control-Allow-Credentials: true等相关CORS头。
• 如果你无法控制API服务端：
  • 开发阶段：使用本地代理转发请求，比如VS Code的Live Server插件配合代理配置、webpack devServer代理，或自行搭建本地Node服务做请求中转，服务端之间发起请求不受CORS规则限制。
  • 生产阶段：要么联系API提供方将你的前端域名加入CORS白名单，要么将请求走你自己的后端服务做中转转发。
• 额外提示：不要直接在本地双击打开HTML文件测试（此时页面源为null，配置CORS更麻烦），建议用本地静态服务启动页面，源会变为http://localhost:端口格式，调试更方便。

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