React Native调用外部API时出现React CORS预检请求错误如何解决？

核心前提说明 #

CORS是浏览器专属的同源安全限制规则，React Native的网络请求走iOS/Android原生网络栈，原生运行环境不存在CORS限制。你遇到的报错基本是开发调试阶段触发的浏览器侧校验。

1 先修复代码参数不匹配问题 #

你当前的请求头和请求体格式不兼容，是导致请求异常的常见诱因：

// 错误写法：请求头声明为表单格式，实际传的是JSON字符串
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: JSON.stringify({ type:'accountLookup',storeId:STORE_ID, storeKey:STORE_KEY, memberId:'471324' })

根据接口要求二选一修改：

• 若接口接受JSON格式参数：

const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ type:'accountLookup',storeId:STORE_ID, storeKey:STORE_KEY, memberId:'471324' })
};

• 若接口要求x-www-form-urlencoded格式参数：

const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `type=accountLookup&storeId=${STORE_ID}&storeKey=${STORE_KEY}&memberId=471324`
};

2 分场景解决调试阶段CORS报错 #

场景1：使用Expo Web/网页端调试 #

• 开发阶段配置本地代理转发请求：修改metro.config.js添加代理规则，把API请求转发到目标地址，绕开浏览器同源校验
• 临时测试可安装Chrome CORS禁用插件，仅开发阶段使用

场景2：使用真机/模拟器 + Chrome远程调试 #

该场景下实际请求走原生网络栈，不会触发CORS限制，报错基本是请求参数错误导致预检请求失败，修复上述参数问题后即可正常请求。修复后仍报错的话可以先用Postman调用接口，确认接口本身可正常返回。

3 生产环境说明 #

打包为iOS/Android安装包后完全不存在CORS限制，不需要额外配置CORS相关规则，仅需确保你的服务端接口允许APP端IP访问即可。

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