React Native - fetch 在 iOS 模拟器上不起作用（没有检查其他）

Question

This looks like the most common question asked on the SO for React. I tried everything given in various questions/answers. Either it is outdated, or not working.

1. I created a fresh project of react native (with everything latest/up to date).
2. I simple create a simple component which has a REST call
3. This REST call would never complete and go to next step of promise.

Here is the code

const Home = () => {

  useEffect(() => {
    console.log('start');
    fetch('https://jsonplaceholder.typicode.com/todos/1', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
     }).then((response) => response.json()).then((data) => {
       console.log('result: ', data);
     }).catch((err) => {
       console.log('failed', err);
     }).finally(() => {
       console.log('Any hope?');
     });
  });

  return (<Text>Lets log the API's for now</Text>);
};

The above code only logs start in the cli or debug window, nothing else, not even logs written in finally.

I'm using xcode 12.0 (12A7209), react 16.13.1, @babel/core 7.12.10.

It is not just with fetch, I have already tried using other libs for http in react native like axios , nothing really helps. They all tend to behave the same.

I already checked browser by opening a website in the simulator , it has working internet . I tried replacing API, available free online.

BTW this is bare project. I tried similar example with expo, it happens to behave the same.

Thanks

Answer 1

In case someone else needs it. I solved it by adding

<key>NSAllowsArbitraryLoads</key>
<true/>

to a Info.plist file which is located inside ios folder in your project.

Thus I changed

<key>NSAppTransportSecurity</key>
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>localhost</key>
        <dict>
          <key>NSExceptionAllowsInsecureHTTPLoads</key>
          <true/>
        </dict>
      </dict>
    </dict> 

with

<key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
      <key>NSExceptionDomains</key>
      <dict>
        <key>localhost</key>
        <dict>
          <key>NSExceptionAllowsInsecureHTTPLoads</key>
          <true/>
        </dict>
      </dict>
    </dict>

Answer 2

I've ran into this issue where XMLHttpRequest never fires its callbacks like onload or onreadystatechange. This caused React-Native's implementation of Fetch to break (because it is effectively a wrapper around XMLHttpRequest). I never solved this issue but I worked around it by using a different library to replace the React-Native Global's prototype of Fetch with react-native-fetch-blob. react-native-fetch-blob is the most well maintained version of a long running replacement for fetch that uses NativeModules and more robust implementation.

So for those of you out there searching, there could be a variety of issues. Android of certain versions requires you to declare whether clearText (unencrpyted) is fair to send over the internet. Some iOS versions have bugged out on SSL Cert issues, even while valid certs. It's an uncommon bug but there records of issues with RN's fetch going back to 2015 that are similar to the issues in this post. Again my solution was to replace Fetch totally, and replace it with react-native-fetch-blob which has a native implementation of the Fetch API. There is sometimes also an issue in Metro where if you turn off inlineRequires fetch will sometimes begin to work. Forget all this and replace fetch.