Expo（React Native）连接生产后端URL时出现网络错误

问题描述 #

基于React Native的Expo项目，使用XMLHttpRequest向生产服务器发送POST请求时触发「ERROR Error: Network request failed」错误，但后端在浏览器中访问正常，错误信息不足以定位原因，需解决连接问题并获取有效响应。

排查与解决步骤 #

1. 确认基础配置正确性 #

• 确保apiUrl是完整的HTTPS/HTTP地址（如https://your-server.com/api/endpoint），代码中占位符base_url需替换为实际有效URL。
• 检查设备网络连接：用设备自带浏览器直接访问后端URL，确认网络可达性。

2. 替换XMLHttpRequest为更易调试的方案 #

XMLHttpRequest的错误提示过于模糊，改用fetch可获取更详细的错误信息，示例代码如下：

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const Prod = () => {
  const apiUrl = 'https://your-production-url.com/endpoint'; // 替换为实际完整URL
  const headers = {
    'LanguageCode': 'en-US',
    'subDomain': 'vamscom',
    'Content-Type': 'application/json',
  };

  const body = {
    productKey: 'your-product-key',
    uniqueKey: 'your-unique-key',
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: headers,
          body: JSON.stringify(body),
        });

        if (!response.ok) {
          // 获取HTTP错误的详细内容
          const errorDetails = await response.text();
          throw new Error(`请求失败：状态码 ${response.status}，详情：${errorDetails}`);
        }

        const data = await response.json();
        console.log("响应数据:", data);
      } catch (error) {
        console.error("请求出错:", error.message);
      }
    };

    fetchData();
  }, []);

  return (
    <View>
      <Text>Testing the production API</Text>
    </View>
  );
};

export default Prod;

3. 检查跨域与安全配置 #

• CORS配置：确认后端已配置CORS，允许你的App的请求来源（生产环境建议指定具体域名，而非通配符*）。浏览器能访问说明CORS基本正常，但移动端需注意自定义请求头是否被后端允许。
• HTTPS证书问题：如果后端使用HTTPS，需确保证书是受信任的正规证书。自签名证书在移动端会被拦截，浏览器可能因缓存或设置忽略此问题，但移动端严格校验。
• ATS配置（iOS）：若后端证书不符合ATS要求，可在app.json中临时添加例外（生产环境不推荐，优先修复证书）：

  {
    "expo": {
      "ios": {
        "infoPlist": {
          "NSAppTransportSecurity": {
            "NSAllowsArbitraryLoads": true
          }
        }
      }
    }
  }
  

4. 调试请求细节 #

• 使用React Native Debugger抓包，查看请求的实际发送情况：包括请求头是否完整、URL是否正确、是否存在重定向或请求被拦截。
• 检查请求体格式：确保JSON.stringify(body)生成的是合法JSON字符串，无语法错误。

5. 移动端权限确认 #

• Android：确认AndroidManifest.xml中已添加网络权限（Expo项目默认已配置，裸机项目需手动添加）：

  <uses-permission android:name="android.permission.INTERNET" />
  

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