使用Expo+React Native在iOS设备上Fetch请求失败求助

问题描述 #

使用Expo结合React Native和React Native Web开发应用，在iOS设备运行时发起Fetch请求出现错误：Error [TypeError: Network request failed]，请求代码如下：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  fetch('https://d331ktkz9v8pls.cloudfront.net/api/home/banners', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    }).then((data) => {
      console.log('data', data)
    }).catch((err) => {
      console.log('Error', err)
    });
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

解决步骤 #

1. 检查目标域名的HTTPS证书 #

iOS对HTTPS证书校验严格，确认d331ktkz9v8pls.cloudfront.net的SSL证书合法、未过期且配置正确。可以通过浏览器访问该URL查看证书详情，若证书存在问题，需更换或修复。

2. 配置iOS网络权限 #

在app.json或app.config.js中添加对应域名的网络权限配置：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": false,
          "NSExceptionDomains": {
            "d331ktkz9v8pls.cloudfront.net": {
              "NSIncludesSubdomains": true,
              "NSAllowsArbitraryLoads": true
            }
          }
        }
      }
    }
  }
}

测试环境可临时设置NSAllowsArbitraryLoads为true（正式环境不推荐）。

3. 排查设备网络环境 #

• 切换Wi-Fi/移动数据测试，确认网络稳定；
• 关闭设备上的VPN、代理等可能干扰请求的服务。

4. 调整Fetch请求头 #

部分服务器对GET请求的Content-Type: application/json兼容性差，可尝试移除该头：

fetch('https://d331ktkz9v8pls.cloudfront.net/api/home/banners', {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    // 移除Content-Type字段
  },
})

5. 用Expo Network模块排查网络状态 #

安装expo-network模块检查设备联网状态：

npx expo install expo-network

在代码中添加检测逻辑：

import * as Network from 'expo-network';

// 组件内调用
const checkNetwork = async () => {
  const state = await Network.getNetworkStateAsync();
  console.log('当前网络状态:', state);
};
checkNetwork();

6. 更新Expo SDK版本 #

旧版SDK可能存在网络请求Bug，更新到最新稳定版：

npx expo upgrade

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