Search code examples
javascriptreactjsfetchinternet-explorer-11

Getting "Headers is undefined" in IE11

I have an react app that works as expected in all browsers, except of IE11. in console I can see this error:

enter image description here

and it's pointing to this line of code:

import {EventEmitter} from 'events';

**const headers = new Headers();**
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');

class ApiService extends EventEmitter {

I had reached these posts, but it's not clear to me what kind of change should I do! Should I only install the missing pollyfills or need to change code syntax...

'Headers' is undefined in IE11

https://www.codeproject.com/Questions/1275068/Javascript-fetch-not-working-in-internet-explorer

Update

After installing both:

window.fetch # https://github.com/github/fetch#read-this-first,

promise # https://github.com/taylorhakes/promise-polyfill

Now I'm getting:

Object doesn't support property or method 'values'

I used a DataTable object of react-carbon-components, and seems it's not supported as well:

_defineProperty(DataTable, "translationKeys", Object.values(translationKeys));

export { DataTable as default };

Solution

  • The Headers interface of the Fetch API is not supported in Internet Explorer.

    Reference:

    Headers

    To make it work with IE browser you need to use polyfill. You can refer any one of the following polyfill may help you to solve the issue.

    1. Fetch headers polyfill

    2. window.fetch polyfill