React Native+Expo环境下Android/iOS HTTP图片上传权限配置问题

Android 端配置 #

Expo项目不用手动修改AndroidManifest.xml，直接在app.json的expo.android节点下添加usesCleartextTraffic配置即可：

{
  "expo": {
    // 其他原有配置...
    "android": {
      // 其他Android配置...
      "usesCleartextTraffic": true
    }
  }
}

修改完成后重启Expo GO客户端，重新加载项目就会生效，这个配置等价于原生Android的cleartextTrafficPermitted="true"，允许应用发起HTTP明文请求。

iOS 端配置 #

iOS默认通过ATS安全策略限制HTTP请求，同样在app.json的expo.ios节点里添加infoPlist配置，两种方式可选：

方式1：指定允许的HTTP域名（推荐，更安全） #

仅放开目标服务器的HTTP访问权限，避免全局降低应用安全性：

{
  "expo": {
    // 其他原有配置...
    "ios": {
      // 其他iOS配置...
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSExceptionDomains": {
            "你的服务器域名.com": {
              "NSIncludesSubdomains": true,
              "NSAllowsInsecureHTTPLoads": true
            }
          }
        }
      }
    }
  }
}

方式2：全局允许HTTP（仅测试环境用） #

测试阶段如果不想逐个配置域名，可以全局放开，但上线前务必切换为方式1：

{
  "expo": {
    // 其他原有配置...
    "ios": {
      // 其他iOS配置...
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true
        }
      }
    }
  }
}

配置完成后重启Expo GO，重新加载项目即可生效。

额外注意 #

• 确认fetch上传代码中的请求地址是HTTP协议，不要误写为HTTPS
• 生产环境优先使用HTTPS，上述配置仅用于无法切换HTTPS的特殊场景
• 若配置后仍无法上传，可尝试更新Expo GO到最新版本，或清除项目缓存后重新加载

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