React Native跨域携带凭证发起fetch请求双端报错如何解决？

核心问题排查 #

你遇到的报错本质是跨域资源共享(CORS)配置错误 + 跨端环境网络限制导致的，PostMan等接口调试工具不会触发浏览器/WebView的同源策略校验，所以请求正常。

第一个错误：请求头设置错误 #

你在请求头中加了Access-Control-Allow-Origin，这个是服务端返回的响应头，不能放在客户端请求头中。加了这个自定义头会强制触发CORS预检OPTIONS请求，只要目标域名的服务端没有正确处理OPTIONS请求，就会直接拦截请求，导致Android端网络请求失败、iOS端返回空响应。

第二个错误：跨域请求配置缺失 #

带Authorization自定义头的跨域请求，需要客户端和服务端同时做对应配置才能正常通行。

解决方案 #

1. 修正前端fetch请求代码 #

删除错误的请求头，补全跨域配置，加响应校验避免JSON解析报错：

const resp = await fetch(`my-url-here`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Basic ${base64.encode(my-key-here)}`
  },
  // 跨域携带认证凭证必须加这个配置
  credentials: 'include',
  body: JSON.stringify(data)
})

// 先校验响应状态再解析JSON，避免空响应报错
if (!resp.ok) {
  // 读取原始响应内容排查问题
  const rawContent = await resp.text()
  console.error(`请求异常，状态码${resp.status}，返回内容：`, rawContent)
  throw new Error('网络请求失败')
}
const result = await resp.json()

2. 修正所有目标域名的服务端CORS配置 #

每个你要请求的域名的服务端，都需要做如下配置：

• 不能用*作为Access-Control-Allow-Origin的值，必须明确指定你前端/应用的来源域名
• 允许OPTIONS预检请求方法
• Access-Control-Allow-Headers配置需要包含Content-Type、Authorization两个请求头
• 配置Access-Control-Allow-Credentials: true允许携带认证凭证

3. 跨端环境额外配置 #

如果是React Native等跨端开发场景，还需要做原生端的网络权限配置：

• Android端：9.0及以上系统默认禁止明文HTTP请求，如果你请求的域名是HTTP协议，需要在AndroidManifest.xml的application节点添加android:usesCleartextTraffic="true"，或者将目标域名加入网络安全配置白名单
• iOS端：默认ATS安全策略禁止不符合要求的HTTPS请求和所有HTTP请求，需要在Info.plist中给对应域名配置NSExceptionAllowsInsecureHTTPLoads = true，测试阶段可以临时放开所有HTTP请求限制。

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