401 (Unauthorized) in Chrome, but not in IE

Jacob Mason picture Jacob Mason · Mar 10, 2016 · Viewed 12.2k times · Source

I recently moved from using jQuery to using isomorphic-fetch with Redux. When running in IE, it manages to fetch fine. However I get the below when running in Chrome.

Failed to load resource: the server responded with a status of 401 (Unauthorized)

It may be worth noting that the web api does have windows authentication enabled.

Here's the code that executes the fetch:

export const fetchSearchResults = (name) => {
  return (dispatch) => {
    dispatch(requestSearchResults(name))
    return fetch(API URI HERE)
      .then(response => response.json())
      .then(json => {
        console.log('Fetch: ' + json.message.features.length)
        dispatch(receiveSearchResults(json))
      })
  }
}

Answer

Alexandr Subbotin picture Alexandr Subbotin · Mar 10, 2016

I suppose you have cookie-based authentication on server. In this case it could be related to credentials key for fetch. XHR requests, that used in jQuery always send your cookie, but using fetch you should pass credentials option with

  • same-origin if you make request to the same origin (domain)
  • include otherwise

Like this:

...
fetch(API_URI_HERE, {credentials: 'same-origin'})
...

I assume that it works in IE because fetch polyfill uses XHR requests under the hood.