Why Does My Browser Refuse to Accept Cookies from a Cross-Origin Response?

Browser Refuses to Honor Set-Cookie Header from Cross-Origin Response

Your application is encountering difficulties setting an HTTP cookie from the backend and retrieving it for subsequent requests. To resolve this issue, you need to address the placement of withCredentials in your client code.

Instead of:

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300;
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
    withCredentials: true, // Incorrect
  },
});

You should have:

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300;
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
  },
  withCredentials: true, // Correct
});

Placing withCredentials as a request property, as seen in the corrected code, enables the browser to send and receive cookies for cross-origin requests. This will allow your front end to properly set and access the refreshToken cookie for authentication purposes.

The above is the detailed content of Why Does My Browser Refuse to Accept Cookies from a Cross-Origin Response?. For more information, please follow other related articles on the PHP Chinese website!