无法在 React Native 中获取或向 http URL 发出 XHR 请求(但 https 和 http://localhost 工作正常) [英] Can't fetch or make XHR request to http URL in React Native (but https and http://localhost work fine)

问题描述

我尝试在 React Native 中向远程服务器发出请求，但总是得到 TypeError: Network request failed;我尝试了不同的 URL，发现如果我向诸如 http://rap2api.taobao.org/app/mock/3008/GET/api/creations 这样的 http URL 发出请求，它总是失败;如果我向诸如 https://facebook.github.io/react-native/movies.json 之类的 https URL 发出请求，它会起作用；如果我向像 http://localhost:3002/list 这样的 http localhost URL 发出请求，它也可以工作.

I tried to make a request to the remote server in React Native, but always get TypeError: Network request failed; I tried different URL, and found that if I make a request to some http URL like http://rap2api.taobao.org/app/mock/3008/GET/api/creations, it always failed; if I make a request to some https URL like https://facebook.github.io/react-native/movies.json, it works; if I make a request to a http localhost URL like http://localhost:3002/list, it also works.

componentDidMount() {
  console.log("_fetchData");
  this._fetchData()
}
_fetchData = () => {
      fetch('http://rap2api.taobao.org/app/mock/3008/GET/api/creations')
        .then((response) => response.json())
        .then((responseJson) => {
          console.log('responseJson',responseJson)
        })
        .catch((error) => {
          console.error(error);
        });
    
}

我在网上查了很多参考资料，猜测这与 Info.plist 文档中的设置有关.我试着做一些修改，如:

I checked many references online and guess it's something about the setting in Info.plist doc. I tried to do some modification like:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>localhost</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
    <key>rap2api.taobao.org</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <key>NSIncludesSubdomains</key>
      <true/>
    </dict>
  </dict>
</dict>

或

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

但是，它们都不起作用，我在向 http URL 发出请求时仍然遇到相同的错误.我确信 API 很好，因为我在 Web 应用程序上尝试过它并成功获得响应.有什么问题?

However, neither of them works, I still get the same error when making requesting to http URL. I am sure the API is fine since I tried it on a web application and get the response successfully. What's the problem?

推荐答案

来自 https://facebook.github.io/react-native/docs/network.html:

默认情况下，iOS 会阻止任何未使用 SSL 加密的请求.如果您需要从明文 URL(以 http 开头的 URL)中获取，您首先需要添加应用传输安全例外.如果您提前知道需要访问哪些域，则只为这些域添加例外更安全；如果直到运行时才知道域，您可以完全禁用 ATS.但请注意，从 2017 年 1 月起，Apple 的 App Store 审核将需要合理的理由来禁用 ATS.有关详细信息，请参阅 Apple 的文档.

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

来自https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33

从 iOS 10.0 及更高版本以及 macOS 10.12 及更高版本开始，支持以下子项:
NSAllowsArbitraryLoadsForMedia
NSAllowsArbitraryLoadsInWebContent
NSRequiresCertificateTransparency
NSAllowsLocalNetworking
注意:有两个允许任意加载"键，它们使用不同的命名模式.注意正确使用 ...ForMedia 和 ...InWebContent.

Starting in iOS 10.0 and later and in macOS 10.12 and later, the following subkeys are supported:
NSAllowsArbitraryLoadsForMedia
NSAllowsArbitraryLoadsInWebContent
NSRequiresCertificateTransparency
NSAllowsLocalNetworking
Note: There are two "allows arbitrary loads" keys and they employ different naming patterns. Take care to use …ForMedia and …InWebContent correctly.

您可以尝试显式设置 NSAllowsArbitraryLoadsForMedia 和 NSAllowsArbitraryLoadsInWebContent.

You might try explicitly setting NSAllowsArbitraryLoadsForMedia and NSAllowsArbitraryLoadsInWebContent.

还要确保在 Xcode 中清理和重建您的项目，以便您更新的 plist 设置包含在您的包中.

Also be sure to clean and rebuild your project in Xcode so that your updated plist settings are included in your package.

这篇关于无法在 React Native 中获取或向 http URL 发出 XHR 请求(但 https 和 http://localhost 工作正常)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！