Analysis and Solutions for OPTIONS Preflight Requests in Cross-Domain AJAX Calls

Problem Phenomenon and Analysis

In web development practice, developers frequently encounter compatibility issues with cross-domain AJAX requests. Specifically, when using jQuery's $.ajax() or $.post() methods to send POST requests, the functionality works correctly in Safari browsers but fails in Firefox 3.5, where the server receives REQUEST_METHOD as OPTIONS and $_POST data is not properly retrieved. Apache access logs record the request type as OPTIONS: ::1 - - [08/Jul/2009:11:43:27 -0500] "OPTIONS sitecodes.php HTTP/1.1" 200 46.

Root Cause: Same-Origin Policy and CORS Mechanism

The fundamental reason for this phenomenon lies in the browser's same-origin policy security restriction. The same-origin policy requires that scripts in a web page can only access resources from the same origin, meaning the protocol, domain name, and port number must be identical. When an AJAX request targets a URL with a different origin than the current page, the browser blocks the request to protect user security.

Firefox 3.5 implements the complete CORS specification. For HTTP request methods that may have side effects on server data (such as POST, PUT, DELETE, etc.), the browser first sends an OPTIONS preflight request. This request includes the following key header information:

• Access-Control-Request-Method: POST - Declares the method to be used in the actual request
• Access-Control-Request-Headers: x-requested-with - Declares the custom headers to be included in the actual request
• Origin: http://ux.inetu.act.org - Declares the origin of the request

The server must respond correctly to this preflight request before the browser proceeds to send the actual POST request. Early versions of Safari may not have strictly implemented the CORS specification, hence not sending preflight requests.

Solution One: JSONP Cross-Domain Communication

JSONP leverages the fact that <script> tags are not restricted by the same-origin policy to achieve cross-domain data retrieval. jQuery provides convenient JSONP support:

$.getJSON('http://<url>/api.php?callback=?', function(data) {
    // Process the returned data
    console.log(data);
});

In this code, jQuery automatically replaces callback=? with a randomly generated callback function name. The server needs to wrap the data in a call to this callback function. Note that JSONP only supports GET requests and requires server-side cooperation.

Solution Two: Server-Side CORS Configuration

For scenarios requiring POST request functionality, CORS support can be configured on the server side. Using the Django framework as an example, it is necessary to handle the OPTIONS preflight request and set appropriate response headers:

def send_data(request):
    if request.method == "OPTIONS":
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
        response['Access-Control-Max-Age'] = 1000
        response['Access-Control-Allow-Headers'] = 'origin, x-csrftoken, content-type, accept'
        return response
    if request.method == "POST":
        # Handle actual POST request logic
        return HttpResponse('Success')

Key configuration explanations:

• Access-Control-Allow-Origin: Specifies allowed origins; * allows all domains, but production environments should specify particular domains
• Access-Control-Allow-Methods: Declares supported cross-domain request methods by the server
• Access-Control-Allow-Headers: Declares supported request headers by the server
• Access-Control-Max-Age: Specifies the validity period of the preflight request to reduce repeated preflights

Modern Development Practices and Considerations

With the evolution of web standards, modern browsers have robust support for CORS. In practical development, attention should be paid to:

1. For requests carrying credentials (e.g., cookies), Access-Control-Allow-Origin cannot be set to * and must specify exact domains
2. Servers should include CORS headers in actual responses to ensure browsers can correctly parse response content
3. Consider using middleware or web server configurations to uniformly handle CORS headers, avoiding repetitive configuration in each endpoint
4. For complex cross-domain scenarios, proxy servers or API gateways can be considered to simplify frontend configuration

By correctly understanding the CORS mechanism and properly configuring the server, various compatibility issues in cross-domain AJAX requests can be effectively resolved, providing stable and reliable cross-domain communication capabilities for modern web applications.