Fetch: request failed Error: unsupported BodyInit type

Created on 1 Nov 2017  路  8Comments  路  Source: github/fetch

request failed Error: unsupported BodyInit type
at Request.Body._initBody (fetch.js:231)

in my react-native project, I used fetch to encapsulate a method:

import 'whatwg-fetch';

export const fetchApi = (params)  => {
  let { api, method, data = {}, stringify = true, ContentType } = params;
  return new Promise((resolve, reject) => {
    return fetch(api.url.href, {
      method: method || "GET",
      headers: {
        'Content-Type': ContentType || 'application/json'
      },
      body: stringify ? JSON.stringify(data) : data
    }).then((resp) => {
      if (resp.ok)  return resp.json()
     ...
    }).then((data) => {
      resolve(data)
    }).catch((error) =>{
      reject(error);
      console.log('request failed', error)
    })
  })
}

and I request the network :

import { fetchApi } from '../../../../libs'

  handleRiderSearch(event){
    let { cityId } = this.props.detail;
    let text = event.nativeEvent.text;
    let params = {
      api: riderSearchApi,
      method: 'POST',
      data: {
        cityId: cityId,
        key: text
      },
      stringify: false,
      ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
    }
    fetchApi(params).then((data) => {
      console.log(data)
    }).catch((err) => {
      console.log(err)
    })
  }

I get every params by correctly

Most helpful comment

I managed to make it work removing the line:
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

And then debugging it with the react native debugger rightclicking in anywhere and selecting enable network Monitor.

Regards! :D

All 8 comments

data need JSON.stringify

Still happens.

My code :
let response = await fetch(url,options);

My HTTP Options :

body : '{"empresaId":null,"ddi":"99","phoneNumber":"00000000","token":null,"codigoAtivacao":null,"idOneSignal":"xxxxxxxxx","modelo":"SM-J120H","id":null,"uuid":"yyyyyyy"}',
method : "POST",
headers : {
  ApiKey : "xxxx",
  Content-Type : "application/json",
  SecretKey : "yyyy"
}

The error :
Uncaught Error: unsupported BodyInit type

My method returns an 204, with no response, could be it the problem ? the fetch is trying to process an response body without having one ?

@DaniloCouto We have a test that empty 204 responses are supported by the polyfill. Which browser do you encounter this on?

I have the same problem with Chromium Version 64.0.3282.167 (Official Build) Built on Ubuntu , running on Ubuntu 17.10 (64-bit), only difference is that my server return status 200

Same here!

Does anyone here have any reproducible steps how to replicate the bug? Please note:

  1. The code that initiates fetch in a browser;
  2. The exact response that the server returns;
  3. The browser version that the Error: unsupported BodyInit type happens on.

I managed to make it work removing the line:
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

And then debugging it with the react native debugger rightclicking in anywhere and selecting enable network Monitor.

Regards! :D

Closing this due to lack of evidence that this is a bug with our polyfill. Please provide more information if you disagree!

Was this page helpful?
0 / 5 - 0 ratings