How to Preflight HTTP Requests to Handle Cross-Domain XMLHttpRequest Calls?

CORS: How to Preflight HTTP Requests

When working with cross-domain HTTP requests, leveraging techniques like implementing a dynamic script tag whose source is a GET request URL may not always be feasible, especially for services accommodating both GET and POST methods. Therefore, one effective workaround involves configuring server responses to include the "Access-Control-Allow-Origin" header and preflighting requests with an OPTIONS request.

During the preflight OPTIONS request, the browser includes two headers: Access-Control-Request-Method and Access-Control-Request-Headers. These headers indicate which methods and headers the client intends to use in the actual request.

To preflight the request successfully, the server needs to acknowledge these headers in its preflight response. For instance, if the browser sends the following headers during the preflight request:

<code class="console">Origin: http://yourdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header</code>

The server's preflight response should include the following headers:

<code class="console">Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header</code>

Crucially, the "Access-Control-Allow-Headers" response header must include the same headers specified in the "Access-Control-Request-Headers" request header, and it should not contain the wildcard character '*'.

Once the server sends this preflight response, the browser will proceed to make the actual request. For more information and examples on CORS implementation, refer to resources like html5rocks.com/en/tutorials/cors/.

The above is the detailed content of How to Preflight HTTP Requests to Handle Cross-Domain XMLHttpRequest Calls?. For more information, please follow other related articles on the PHP Chinese website!