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

Demystifying the 'Access-Control-Allow-Origin' Header in CORS

Cross-origin resource sharing (CORS) enables JavaScript code loaded from one origin to access resources from a different origin. Understanding how the 'Access-Control-Allow-Origin' header facilitates this cross-origin access is crucial.

How 'Access-Control-Allow-Origin' Works

When a client requests a resource from a different origin, the server can respond with an 'Access-Control-Allow-Origin' header. This header specifies which origins are permitted to access the resource. The default behavior is to deny all cross-origin requests.

To enable cross-origin access, the server must add the 'Access-Control-Allow-Origin' header to the response. The value of this header can be either a specific domain (e.g., 'http://siteB.com') or '*,' indicating that any origin is allowed to access the resource.

Handling Non-Simple Requests

For non-simple requests, which typically involve HTTP methods other than GET or POST or non-standard request headers, the browser first sends a preflight OPTIONS request. This request verifies whether the server will accept the intended request.

If the server responds to the OPTIONS request with appropriate 'Access-Control-Allow-Headers' and 'Access-Control-Allow-Methods' headers, the browser proceeds with the actual request.

Example Usage

Consider the following scenario:

Site A: https://siteA.com
Site B: https://siteB.com

To enable JavaScript code downloaded from Site A to access resources on Site B:

1. Site A: Fetch the JavaScript code from Site B:

fetch('https://siteB.com/myCode.js')
  // ...

2. Site B: Serve 'myCode.js' with the 'Access-Control-Allow-Origin' header:

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

3. JavaScript (Site A): The JavaScript code can now make requests to Site B:

fetch('https://siteB.com/api/data')
  // ...

By understanding how the 'Access-Control-Allow-Origin' header works, you can effectively enable cross-origin resource sharing, ensuring that JavaScript code can seamlessly access resources from different origins.

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