axios not retrieving cookie

Question

Hey I am having an issue where when I am running the server and app locally there is no issue but when each is pushed to their respective servers the app does not return the cookie. Does anyone know how to get around this?

server:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Credentials', true);
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  next();
});

react:

const request = axios.post(`${url}/api/login`, {
      email,
      password,
      withCredentials: true,
      headers: { crossDomain: true, 'Content-Type': 'application/json' },
    })
    .then(response => response.data);

Solution 1

I figured out how to fix this. I used:

Server:

app.use(
  cors({
    credentials: true,
    origin: 'http://myapp.com',
  })
);

React:

export function loginUser({ email, password }) {
  axios.defaults.withCredentials = true;
  const request = axios
    .post(`${url}/api/login`, {
      email,
      password,
      withCredentials: true,
      headers: { crossDomain: true, 'Content-Type': 'application/json' },
    })
    .then(response => response.data);

  return {
    type: 'USER_LOGIN',
    payload: request,
  };
}

Solution 2

Try to use defaults axios.defaults.withCredentials = true

It's a known bug with axios

Comments

[Matt]

Thank you but where would I put that? Within the request?

[Vitaly Migunov]

Just put it before the request

[David Ferreira]

It works for me. Works even without the headers option.