Why Can\'t I Set Cookies from a Cross-Origin API Response?

Cross-Origin HTTP Cookie Management: Resolving Header Issues

In web development, setting and retrieving HTTP cookies from a cross-origin response can be a challenge. This situation arises when you have a front-end application communicating with a back-end API served from a different domain.

The issue stems from the same-origin policy enforced by modern browsers, which restricts access to resources from different origins. When a cross-origin request is made, the browser typically refuses to honor the Set-Cookie header in the response, preventing the cookie from being stored locally.

Scenario

Consider this specific case where a front-end application needs to set a refresh token for authentication purposes. The back-end API is sending the Set-Cookie header as expected, but the front end is unable to receive and save it.

Axios Request Configuration

The code provided for sending requests from the front end includes the withCredentials property in the headers object. This is not the correct location for this property. withCredentials should be set as a property of the axios instance itself, rather than a header.

// Incorrect (Sets withCredentials as a request header)
const axiosAuth = axios.create({
  ...
  headers: {
    withCredentials: true,
  },
  ...
});

// Correct (Sets withCredentials as a property of the instance)
const axiosAuth = axios.create({
  ...
  withCredentials: true,
  ...
});

Solution

By moving withCredentials to be a property of the axios instance, rather than a header, the browser will properly honor the Set-Cookie header from the cross-origin response and store the cookie locally. This allows the front-end application to subsequently send the cookie to the API on subsequent requests for authentication purposes.

The above is the detailed content of Why Can\'t I Set Cookies from a Cross-Origin API Response?. For more information, please follow other related articles on the PHP Chinese website!