In the context of CORS requests, the “Vary: Origin” header is particularly important. When a browser makes a CORS request, it automatically adds an “Origin” header to indicate the source of the request. The server must check this header and add an “Access-Control-Allow-Origin” header to indicate which sources can access the requested resource.
If the “Access-Control-Allow-Origin” header is missing from the response, the browser will reject the response and throw a CORS error. This is because the browser enforces the same-origin policy to prevent malicious websites from accessing data from other websites.
If the server adds the “Access-Control-Allow-Origin” header but does not correctly configure “Vary: Origin”, cache confusion and CORS errors may occur. This is because the browser checks the “Vary” header before caching a response to ensure that the cached response only applies to the same request headers. If “Vary: Origin” is not set, the browser may incorrectly apply the cached response to different “Origin” request headers, leading to CORS errors.
Understanding the Importance of “Vary: Origin” to Prevent Cache Confusion and CORS Errors: https://medium.com/p/ef3b63046b00