Why Does My Browser Reject Set-Cookie Headers from Cross-Origin Responses?

Browser Rejects Set-Cookie Header from Cross-Origin Response

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. However, there are certain limitations to what can be shared across origins, including the setting of cookies.

When a cross-origin response includes a Set-Cookie header, the browser may refuse to honor the header for security reasons. This is because allowing cookies to be set by third-party websites could lead to cross-site request forgery (CSRF) attacks.

To resolve this issue, ensure that the withCredentials property is set to true in your client code. This property instructs the browser to include credentials (such as cookies) in the cross-origin request.

In JavaScript, you can set the withCredentials property in the Axios request configuration:

const axiosAuth = axios.create({
  withCredentials: true, // Correct
});

By setting the withCredentials property to true, you allow the browser to send cookies to the cross-origin server, resolving the issue where the browser refuses to honor the Set-Cookie header.

The above is the detailed content of Why Does My Browser Reject Set-Cookie Headers from Cross-Origin Responses?. For more information, please follow other related articles on the PHP Chinese website!