React Native中如何向无所需access响应头的服务器发起fetch请求？

核心结论 #

可以发起请求，但浏览器会拦截响应并抛出错误。

具体说明 #

• 请求会正常发送：你的fetch请求确实会到达服务器，服务器也能处理这个请求（比如执行写入、查询操作）。但浏览器的同源策略会在收到响应后校验CORS相关头，一旦缺失你列出的必要头，就会直接拦截响应，不让前端代码获取结果，同时抛出TypeError: Failed to fetch。
• 报错的直接原因：你提到的几个缺失的头都是跨域请求必须的CORS验证项：
  • Access-Control-Allow-Origin：必须严格匹配请求的源（此处为https://normal-website.com），否则浏览器判定跨域不被允许
  • Access-Control-Allow-Methods：如果请求用了PUT/POST这类非简单HTTP方法，服务器必须明确允许这些方法
  • Access-Control-Allow-Headers：如果请求携带了自定义头（比如Special-Request-Header），这个头必须包含对应的自定义头名称
  • Access-Control-Allow-Credentials：如果请求附带了凭据（比如Cookie、HTTP认证信息），这个头必须设为true，且Access-Control-Allow-Origin不能使用通配符*
• 不受限制的场景：如果是同域请求，完全不需要这些CORS头；如果用Postman、curl这类非浏览器工具发起请求，也不受同源策略约束，能正常获取响应。

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