[Exception: Error: The 'responseText' property is only available if 'responseType' is set to '' or 'text', but it is 'blob'. at XMLHttpRequest.get ... at XMLHttpRequest.remoteFunction]

[zedtux]

• 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

Environment:
  OS: macOS 10.14
  Node: 10.4.1
  Yarn: 1.7.0
  npm: 6.1.0
  Watchman: 4.9.0
  Xcode: Xcode 10.0 Build version 10L201y
  Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Description

I'm using fetch in order to call my local Rails app backend from my iPhone as the following :

    fetch('https://api-loc.myapp.co:3000/api/bootstrap').then(
      (response) => {
        console.log('[BootstrapApi] fetch("https://api-loc.myapp.co:3000/api/bootstrap") response', response)
      }
    ).catch(
      (error) => {
        console.log('[BootstrapApi] fetch("https://api-loc.myapp.co:3000/api/bootstrap") error', error)
      }
    )

but it is always failing with the following :

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (fetch.js:442)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:567)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:397)
    at XMLHttpRequest.js:503
    at RCTDeviceEventEmitter.emit (EventEmitter.js:179)
    at MessageQueue.__callFunction (MessageQueue.js:351)
    at MessageQueue.js:116
    at MessageQueue.__guardSafe (MessageQueue.js:314)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:115)

I have added a console.log of the xhr object from the whatwg-fetch package, from fetch.js:442 , and it shows the following responseText:

[Exception: Error: The 'responseText' property is only available if 'responseType' is set to '' or 'text', but it is 'blob'. at XMLHttpRequest.get (blob:http://172.16.16.71:8081/a12ab84a-c637-4b31-883a-2b94fddce1f9:17731:17) at XMLHttpRequest.remoteFunction (<anonymous>:2:14)]

I tried exactly the same but with https://www.google.com and no error, expected 200 response received.

In order to avoid name resolution issues (I have a Dnsmasq instance on my Mac, and my iPhone is using my Mac as a DNS resolver), I tried with my IP address but same result.

Also in order to avoid SSL certificate issues (I have a self-sign for the development environment), I'm running an Nginx instance, accepting HTTP requests, redirecting to HTTPS, but still same error.

[zedtux]

I forgot to tel that accessing my web app using Safari is working fine, the error is only with react native.

[zedtux]

I just tried also with the iOS and Android simulators (which shouldn't have so much problems to reach the app as the real device) but exactly the same error.

[zedtux]

I tried to remove the SSL mode of my backend app, and allow insecure connection, in the info.plist file of my app from Xcode, and I was able to reach the server.

So it looks like there is an issue with the SSL/TLS certificate.

Anyways the error I reported isn't correct and shouldn't be.

[zedtux]

Okay so I think I figured out what is this error The 'responseText' property is only available if 'responseType' is set to '' or 'text', but it is 'blob'. : This error didn't occur while my app was running, it occurs when I'm clicking the {...} in front of the responseText attribute of the xhr variable which I printed in Chrome's console using console.log.

So there is a real Network issue, which I don't know the real message. 😞

[zedtux]

So updating the var support = {...} from whatwg-fetch (at node_modules/whatwg-fetch/fetch.js) in order to exclude the Blob allowed me to get the _response: An SSL error has occurred and a secure connection to the server cannot be made. 👍

Before :

  var support = {
    searchParams: 'URLSearchParams' in self,
    iterable: 'Symbol' in self && 'iterator' in Symbol,
    blob: 'FileReader' in self && 'Blob' in self && (function() {
      try {
        new Blob()
        return true
      } catch(e) {
        return false
      }
    })(),
    formData: 'FormData' in self,
    arrayBuffer: 'ArrayBuffer' in self
  }

After :

  var support = {
    searchParams: 'URLSearchParams' in self,
    iterable: 'Symbol' in self && 'iterator' in Symbol,
    blob: 'FileReader' in self && 'Blob' in self && false,
    formData: 'FormData' in self,
    arrayBuffer: 'ArrayBuffer' in self
  }

Now I need to figure out why do I have this error as I'm using a Let's Encrypt SSL certificate, working well in Safari on the iPhone, without installation it before.

[zedtux]

In this end, I made it so that my backend app acceptes non-HTTPS requests, and the mobile app to allow sending non-HTTPS request 🤦‍♂️ 😢.