fetch “https” is invalid，http is ok on android

[git-Asir]

• [❌] Review the documentation: https://facebook.github.io/react-native
• [✅] Search for existing issues: https://github.com/facebook/react-native/issues
• [✅] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 43.50 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.10.0 - /usr/local/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.3, macOS 10.13, tvOS 11.3, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3
API Levels: 19, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 9.3/9E145 - /usr/bin/xcodebuild
npmPackages:
react: ^16.4.1 => 16.5.0
react-native: ^0.57.0 => 0.57.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-update-cli: 0.1.0

Description

when i update to react-native 0.57.0, I have a problem. Fetch cannot send HTTPS requests; but http is ok; this problem found on android.
fetch error:
error:TypeError: Network request failed

YellowBox.js:67 Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:20611:18)
at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:23187:27)
at XMLHttpRequest.setReadyState (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:22942:20)
at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:22769:16)
at blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:22879:47
at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:3282:37)
at MessageQueue.__callFunction (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:2775:44)
at blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:2548:17
at MessageQueue.__guard (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:2729:13)
at MessageQueue.callFunctionReturnFlushedQueue (blob:http://localhost:8081/ef8b9a53-d930-4e4f-8e2b-9ad73681b847:2547:14)
console.warn @ YellowBox.js:67
onUnhandled @ Promise.js:43
onUnhandled @ rejection-tracking.js:71
(anonymous) @ JSTimers.js:256
_callTimer @ JSTimers.js:152
callTimers @ JSTimers.js:405
__callFunction @ MessageQueue.js:349
(anonymous) @ MessageQueue.js:106
__guard @ MessageQueue.js:297
callFunctionReturnFlushedQueue @ MessageQueue.js:105
(anonymous) @ debuggerWorker.js:72

Reproducible Demo

export default {
  post: function(url, params = null) {
    if (!params) {
      params = {};
    }

    return new Promise((resole, reject) => {
      var strParams="";
      if (params) {
        Object.keys(params).forEach(function(key,index) {
          if(index==0){
            strParams +=key + "=" + params[key];
          }else{
            strParams +="&"+key + "=" + params[key];
          }
        
        });
      }
      strParams += "&platform="+Platform.OS;
      strParams += "&version="+commonCfg.APP_VERSION_NEWEST[Platform.OS];

      fetch(baseUrl + url, {
        method: "post",
        body: strParams,
        headers: {
          　　　　 'Accept': 'application/json',
          　　　　 'Content-Type': 'application/x-www-form-urlencoded',
        　　　　 },
        })
        .then(function(response) {
          let jsonData = response.json();
          resole(jsonData);
        })
        .catch(function(error) {
          console.log("error:"+error);
          reject(error);
        });
    });
  },

  get: function(url, params = null) {
    if (!params) {
      params = {};
    }
    params.ak = ak;
    return new Promise((resolve, reject) => {
      try {
        if (params) {
          var lstParams = [];
          Object.keys(params).forEach(function(key) {
            lstParams.push(key + "=" + params[key]);
          });
          if (url.search(/\?/) === -1) {
            url += "?" + lstParams.join("&");
          } else {
            url += "&" + lstParams.join("&");
          }
        }
  // console.log(baseUrl+url);
        fetch(baseUrl + url, {
          method: "get"
        })
          .then(response => {
            let jsonData = response.json();
            resolve(jsonData);
          })
          .catch(error => {
            console.log("error:"+error);
            reject(error);
          });
      } catch (error) {
        console.log("error:"+error);
        reject(error);
      }
    });
  }
};

[git-Asir]

and terminal printf：
::ffff:127.0.0.1 - - [13/Sep/2018:06:40:09 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 200 - "-" "okhttp/3.10.0"

[asmsuechan]

Hi, I faced the same issue today and solved it. In my case, my certificate was invalid so I added intermidiate certificate and crossroot certificate. And then it worked fine. You should make sure if your certificate is correct.

#10404 (comment)

[git-Asir]

@asmsuechan But I don't have a private certificate，and the https://XXX images can't get，These images are not on my server；and how to change certificate？

[git-Asir]

This problem may be caused by the android version targetSdkVersion. When I changed it from 26 to 22, it returned to normal. HTTPS normal access

[git-Asir]

This problem may be caused by the android version targetSdkVersion. When I changed it from 26 to 22, it returned to normal. HTTPS normal access
android/app/build.gradle
defultConfig{
targetSdkVersion 22
...
}