401 (Unauthorized) in Chrome, but not in IE

Question

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))
      })
  }
}

Solution

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.

Comments

[Jacob Mason]

I'll give this a shot, but this looks exactly like the problem. Thank you!