IE 11 not passing Authorization header in API call

Viewed 2127

Stack : ReactJS, axios , api deployed on AWS

In My reactjs App, I am calling API deployed on aws using axios. This app is working perfectly in chrome and firefox, But failing in IE 11.

All apis are correctly configured to allow Authorization in access control header enter image description here

I am using below code to add authorization header and accessToken in a request

   const axiosInstance = axios.create({
  baseURL: `https://abc.api.nonprod.org/`
});

export const createTokenHeaders = (idToken, accessToken) => ({
  authorization: `Bearer ${idToken}`,
  accessToken: `Bearer ${accessToken}`
});
// Add a request interceptor
export const reqInterceptor = config =>
  // get the bearer token and add it in the header
  Auth.currentSession()
    .then(data => {
      const idToken = data.getIdToken().getJwtToken();
      const accessToken = data.getAccessToken().getJwtToken();
      // eslint-disable-next-line no-param-reassign
      config.headers = Object.assign({}, config.headers, createTokenHeaders(idToken, accessToken));
      return config;
    })
    .catch(err => {
      console.log(err);
      throw new Error('Error getting bearer token');
    });

axiosInstance.interceptors.request.use(reqInterceptor);

export const performGet = (uri, queryParams = {}, headers) => {
  const requestParams = {
    params: queryParams,
    headers
  };
  return axiosInstance.get(uri, requestParams);
};

When I run this app in chrome from localhost:3000 then chrome is correctly calling OPTIONS request and then GET request with correct Authorization header.

But when I am running the same app in IE it is not calling OPTIONS request and also not passing Authorization header in GET request( however it is passing accessToken header).

2 Answers

You probably need to set withCredentials: true in order for authorization headers to be passed to CORS requests.

Related