XHR fails with "Invalid response for blob" always when response status 204( no-content )

[mastersam92]

When I try fetch some backend's api, then response, in case of success, has contentType application/json and http status 204 (no content), my api call fails with error: "Invalid response for blob:"
If response have some content, fetch works perfectly;

Update:
RN default fetch( whatwg-fetch ) request fails always when response status 204( no content ), regardless of content-type, request method( tested on GET / POST ).. and, even if response has some data in body, but have status 204 - fetch fails with error "Invalid response for blob:".

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 9.3.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.0.0 => 16.2.0
react-native: ^0.54.0 => 0.54.0
whatwg-fetch: ^1.0.0 => 1.1.1

Expected Behavior

Works normally. Without some errors in fetch only because response has status 204( no content );

Actual Behavior

Fails with error: "Invalid response for blob:"

Steps to Reproduce

1. Fetch( with default RN fetch ) some backend's API, that response with contentType application/json and http status 204 (no content), i.e response contains only header.

2. Enjoy fails with.. description about.. blob !?

[andrew-wagner89]

I encountered the same issue when I tried to upgrade from 0.53.0 to 0.54.0, so for now I'm just going to stay on 53 until this is resolved

[genglei01]

Get the same issue

[balsloev]

Same issue here.

[Azkv]

+1
On 0.54 this keep popping up if code is 204
Nothing on 0.53

[dbarros]

I'm also seeing the same error on 0.54. Works fine in 0.53.3.

[Azkv]

0.53

case 'blob':
        this._cachedResponse = new global.Blob(
          [base64.toByteArray(this._response).buffer],
          {type: this.getResponseHeader('content-type') || ''}
        );
        break;

0.54 XMLHttpRequest blob case

case 'blob':
        if (typeof this._response === 'object' && this._response) {
          this._cachedResponse = BlobManager.createFromOptions(this._response);
        } else {
          throw new Error(`Invalid response for blob: ${this._response}`);
        }
        break;

0.54 enforces the response to be an object..

Edit:
As a temporary workaround, simply comment out the
throw new Error(Invalid response for blob: ${this._response});
line and it won't throw it anymore. But this doesn't solve the problem ofc.

[obsidianart]

Same here, but only on Android. Iphone seems to work, which makes no sense.

[johnnyrockenstein]

Any updates or work arounds for this?

[johnckendall]

+1, Same problem doing a fetch with method HEAD

[gnumarcelo]

Got the same error on iOS simulator. In my case I'm sending a POST and once it returns 401 (Unauthorized) I get the error of Invalid response for blob

[satya164]

Does anyone have a repro case that I can test?

[johnckendall]

easy to replicate:

fetch('https://twitter.com/johnckendall',{method:'HEAD'})

[satya164]

I couldn't repro this with a simple server. It would be great if someone has a repro which I can use to fix the issue.

[skv-headless]

reproducible in fresh app https://github.com/skv-headless/TestFetch based on @johnckendall answer

[David-vz]

We've got the same issue on our end.
Empty response from a server call (even if status = ok and status code is 200) returns the above error.
Diving in to XMLHttpRequest.js and making the following changes seems to be working for now:

case 'blob':
 if(typeof this._response==='string'){
              this._cachedResponse = null;
              break;
          } else if (typeof this._response === 'object' && this._response) {
          this._cachedResponse = BlobManager.createFromOptions(this._response);
        } else {
          throw new Error(`Invalid response for blob: ${this._response}`);
        }
        break;

Obviously not ideal...
It seems to be expecting and forcing an object for the return...
running console.log(typeof this._response) will output 'string' when the content is empty and cause the error to fire.

[satya164]

This issue seems iOS only? Please always mention the platform when opening an issue. This is a duplicate of #18223 and should be fixed in master. We'll cherry pick it to release version soon.

[brenohq]

same issue here

[hmenzagh]

@satya164 No I'm getting it on Android only for my part
PS : "react-native": "^0.55.3"

[sadhu05]

Same issue here but in android

[hmenzagh]

@sadhu05 see #18440

[react-native-bot]

It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

[luhui]

Same issue on android, 0.55.4. Always happened if the url contains '-', and protocol is https.

e.x. POST 'https://apis-test.somedomain.com'

[jgreen01su]

This issue is happening in 0.55.4.

XMLHttpRequest.js

        if (typeof this._response === 'object' && this._response) {
          this._cachedResponse = BlobManager.createFromOptions(this._response);
        } else {
          throw new Error(`Invalid response for blob: ${this._response}`); // line 257
        }
        break;

[satya164]

Duplicate of #18440

[obsidianart]

18440 is Android, this is IOs. 18440 is not about 204 or empty responde either. I don't think they are duplicates @satya164 even if they might have the same root cause.

[satya164]

@obsidianart this was already fixed on iOS. most comments here reference Android.

[stueynet]

@satya164 lets keep the focus on this one as its still open and Android is in the title: #18440

[bonham000]

Same issue here with Expo 29 (React Native 0.55.4). The app is running normally in the development and if I preview a build in the Expo app but if I open an .apk build on Android it fails on startup with invalid response for blob if I am on wifi, and just a blank screen (no feedback) if on cellular data.

[wzup]

@satya164

this was already fixed on iOS.

You are wrong. This IS NOT fixed on iOS! I'm on iOS, see my env below and I get same error.

Env:

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 8.11.3
  Yarn: Not Found
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.4.1 Build version 9F2000
  Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
  react: 16.3.0-alpha.2 => 16.3.0-alpha.2
  react-native: 0.54.2 => 0.54.2

[wzup]

In my case the error is thrown when I imitate offline regime in my app - I switch off WiFi.

These are args that lead to error

[
  1240,
  "The Internet connection appears to be offline.",
  false
]

This is code piece with ...args:

// app/node_modules/react-native/Libraries/Network/XMLHttpRequest.js:505

    this._subscriptions.push(RCTNetworking.addListener(
      'didCompleteNetworkResponse',
      (args) => this.__didCompleteResponse(...args) // <== here
    ));

[kamelj]

Same here for android
reaact-native: 54
android-sdk: 28

iOS working fine,,, is there any solution or I have to upgrade react-native ?!?!