React Native 解决 iOS HTTP请求失败

每天都有好果汁吃
382 阅读3分钟

前言

在开发 React Native 应用时，处理网络请求是一个常见的任务。为了确保应用的安全性，iOS 引入了 App Transport Security (ATS)，它要求应用通过 HTTPS 来进行网络通信。然而，在开发环境，我们可能需要允许 HTTP 请求或访问特定域名的非安全连接。本文将详细介绍如何在 Info.plist 中配置 ATS，解决 HTTP 请求失败的问题。

App Transport Security (ATS)

ATS 是 iOS 的一项安全特性，旨在保护用户数据通过网络传输时的安全性。默认情况下，ATS 强制要求所有的网络请求使用 HTTPS。这意味着，如果你的应用尝试使用 HTTP 进行请求，系统将拒绝该请求，并返回错误。

背景

iOS 限制 HTTP 请求的规则是通过 App Transport Security (ATS) 引入的，主要是在 iOS 9 中首次发布的。ATS 旨在提高应用的安全性，要求所有网络请求使用 HTTPS，而不是 HTTP。

  • 发布版本：iOS 9
  • 发布日期：2015 年 9 月 16 日
  • 主要目标：通过强制使用 HTTPS，ATS 旨在保护用户数据的安全性，防止数据在传输过程中被窃取或篡改。

常见配置

在 Info.plist 中，你可能会看到以下几种配置，用于处理不同的网络请求场景：

允许任意加载

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

  • NSAllowsArbitraryLoads：设置为 true 时，表示应用允许从任意来源加载内容，包括不安全的 HTTP 请求。这在开发阶段可能很方便，但在生产环境中通常不推荐使用，因为这会降低应用的安全性。

  • NSAllowsLocalNetworking：允许应用访问本地网络设备和服务，这在需要与本地服务器或设备通信时非常有用。

允许特定域名的例外

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSTemporaryExceptionMinimumTLSVersion</key>
            <string>TLSv1.0</string>
        </dict>
    </dict>
</dict>

  • NSExceptionDomains：允许为特定的域名配置例外，避免 ATS 的限制。

  • NSIncludesSubdomains：设置为 true，表示这个例外适用于所有子域名。

  • NSTemporaryExceptionAllowsInsecureHTTPLoads：设置为 true，表示允许对该域名进行不安全的 HTTP 请求。这在开发过程中非常有用，尤其是在调试或与不支持 HTTPS 的旧服务交互时。

  • NSTemporaryExceptionMinimumTLSVersion：用于指定最低的 TLS 版本。通常情况下，如果你处理的是 HTTPS 请求，这个设置可能不需要。

具体操作

下图为vscode演示

  1. 如下图所示，找到ios目录，打开 项目名称 目录下的 Info.plist 文件
  2. 搜索 NSAllowsArbitraryLoads ,查看NSAllowsArbitraryLoads的值是什么，如果是 <false/> ，请改为 <true/>
  3. 在下方新增 特定的域名配置例外，ip 和域名都可以配置，也可以配置成 localhost
    <key>NSExceptionDomains</key>
    <dict>
        <key>请求域名</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSTemporaryExceptionMinimumTLSVersion</key>
            <string>TLSv1.0</string>
        </dict>
    </dict>

image.png

结论

在 React Native 开发中，理解和正确配置 App Transport Security 是确保应用安全性的重要步骤。根据需求灵活使用 NSAllowsArbitraryLoads 和 NSExceptionDomains，可以有效地处理 HTTP 和 HTTPS 请求。在任何情况下，都应优先考虑安全性，确保用户数据的保护。如果在配置中遇到问题，务必检查网络请求代码和服务器配置，以确保能够顺利进行网络通信。

avatar
文章
阅读
粉丝