React Native调用Heroku Express接口失败及静态托管问题咨询

1. 直接访问Heroku地址正常，React Native fetch请求失败的常见原因 #

• 明文HTTP请求被系统拦截：安卓9及以上版本、iOS 9及以上版本默认禁止应用发起未加密的HTTP明文请求。如果你请求的地址是http://开头的Heroku地址，会被系统网络层直接拦截，表现为网络请求失败。直接通过浏览器访问时不受该系统级规则限制，因此可以正常打开。优先替换为Heroku默认提供的https://开头的服务地址即可解决，不需要额外配置网络权限。
• CORS预检请求未被处理：React Native发起非简单请求（比如带自定义请求头、POST请求使用JSON格式传参）时，会先发送OPTIONS方法的预检请求。如果你的Express服务没有配置对应CORS响应头（比如未返回正确的Access-Control-Allow-Origin、未放行OPTIONS方法），预检失败后fetch会直接抛出网络错误，不会像浏览器控制台那样明确提示CORS异常。可以在Express中接入cors中间件，放开对应请求方法和来源校验即可。
• 服务冷启动触发请求超时：Heroku免费版实例在30分钟无访问时会进入休眠状态，首次唤醒需要10-30秒的冷启动时间。React Native的fetch默认超时时间通常在10秒左右，还没等服务启动完成就会超时断开；而手动用浏览器访问时会持续等待加载，直到服务响应，因此表现为浏览器能打开、fetch请求失败。可以手动调大fetch的超时时间，或者升级Heroku付费实例避免休眠。
• 调试环境网络隔离：如果使用安卓模拟器调试，模拟器内的localhost指向模拟器自身而非宿主机，如果你错误配置了本地代理但未给模拟器设置代理规则，也会导致请求无法发出。

2. 能否照搬React Web的方式用Express托管React Native打包产物 #

不能直接照搬React Web项目的静态托管逻辑，两者的打包产物和运行环境有本质区别：

• React Web项目打包后产出的是HTML、JS、CSS等可以直接被浏览器解析运行的静态资源，放到client/build目录通过express.static托管后，用户通过浏览器访问对应地址就能直接加载应用，逻辑成立。
• 纯React Native项目打包后产出的是安卓.apk安装包、iOS.ipa安装包，这些资源需要下载安装到用户手机的原生运行环境中才能启动，无法像Web静态资源那样直接通过浏览器加载运行，因此直接托管打包目录没有实际意义。
• 如果你使用的是React Native for Web方案，打包后产出的是Web端可运行的静态资源，这种场景可以用app.use(express.static("client/build"))的方式托管；如果你需要实现React Native的热更新能力，也可以把打包后的JS Bundle文件放到静态资源目录供APP端拉取，但这需要额外修改APP端的Bundle加载配置，不是加一行静态托管代码就能直接生效的。

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