How Does the `Access-Control-Allow-Origin` Header Control Cross-Origin Resource Sharing (CORS)?

Understanding the 'Access-Control-Allow-Origin' Header

The 'Access-Control-Allow-Origin' header plays a crucial role in cross-origin resource sharing (CORS) and enables browsers to determine whether resources fetched from a different origin can be accessed by a requesting client.

Initially, you may have believed that MyCode.js, downloaded from site A, could make cross-origin references to site B solely because the response header contained 'Access-Control-Allow-Origin: http://siteB.' However, this is incorrect.

How it Works:

When site A requests content from site B, site B responds with an 'Access-Control-Allow-Origin' header to indicate which origins are permitted to access its resources. By default, site B's content is inaccessible to other origins. If site B sends a response with the following header:

Access-Control-Allow-Origin: http://siteA.com

it grants site A permission to access its content.

The browser performs a "preflight" OPTIONS request if the request is "non-simple" (utilizes HTTP verbs other than GET or POST, or non-simple request headers). In this OPTIONS request, the browser verifies if the server will accept the actual request. Only if the server responds with appropriate 'Access-Control-Allow-Headers' and 'Access-Control-Allow-Methods' headers will the browser send the actual request.

Enabling Cross-Origin Access:

To enable access from site A to site B using the 'Access-Control-Allow-Origin' header:

1. Ensure that site B serves its pages with the correct header, specifying site A's domain as an allowed origin:

   Access-Control-Allow-Origin: http://siteA.com

2. Understand that non-simple requests involve an additional preflight OPTIONS request. The server must respond to this OPTIONS request with appropriate 'Access-Control-Allow-Headers' and 'Access-Control-Allow-Methods' headers to allow the actual request.

By implementing these steps, you can effectively enable JavaScript code downloaded from site A to access resources on site B using the 'Access-Control-Allow-Origin' header.

The above is the detailed content of How Does the `Access-Control-Allow-Origin` Header Control Cross-Origin Resource Sharing (CORS)?. For more information, please follow other related articles on the PHP Chinese website!