Solving CORS Failures in Chrome: The Critical Role of Content-Type Header and Server Response Configuration

The Unique Challenges of CORS in Chrome Browsers

Cross-Origin Resource Sharing is a fundamental technology in modern web development, but its implementation varies across browsers. According to user reports, after configuring CrossOriginFilter on a Jetty server, CORS requests work correctly in IE8 and Firefox but fail in Chrome. This inconsistency typically stems from differences in how strictly browsers enforce CORS specifications.

Core Issue: Content-Type Request Header and Server Response Configuration

Through detailed analysis, the key issue lies in the matching relationship between the Content-Type request header and the server's Access-Control-Allow-Headers response header. When a client uses jQuery's $.ajax method to initiate a cross-origin request:

$.ajax({ url : crossOriginURL,
    type : "GET",
    error : function(req, message) {
        alert(message);
    },
    dataType :  "json" } );

Chrome sends a preflight request to check whether the server allows specific request headers. If the server doesn't explicitly permit the Content-Type header, the request will be rejected even if the client sets it.

Solution: Coordinated Client and Server Configuration

An effective solution requires proper request header configuration on the client side and corresponding response header configuration on the server side:

Client-Side Configuration

Explicitly set the Content-Type header before initiating the request:

// Using native XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', crossOriginURL, true);
xhr.setRequestHeader('Content-Type', 'text/plain');

// Using jQuery
$.ajax({
    url: crossOriginURL,
    type: "GET",
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Content-Type', 'text/plain');
    },
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error("Request failed:", error);
    }
});

Server-Side Configuration

The server must include the Access-Control-Allow-Headers header in its response, explicitly listing permitted request headers:

// PHP example
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");

// Note: If using credentials, wildcard * cannot be used
// header("Access-Control-Allow-Origin: http://example.com");

Detailed Explanation of Preflight Request Mechanism

Chrome implements a strict preflight checking mechanism for CORS requests. The browser sends an OPTIONS preflight request when the request meets any of the following conditions:

1. Uses methods other than GET, HEAD, or POST
2. Sets custom request headers (such as Content-Type)
3. The Content-Type value is not application/x-www-form-urlencoded, multipart/form-data, or text/plain

The preflight request process follows this sequence:

1. Browser sends OPTIONS request to server
2. Server responds with CORS-related header information
3. Browser checks if response headers permit the actual request
4. If permitted, browser sends the actual request
5. If not permitted, request is blocked and error is triggered

Special Considerations for Local File Access

Another common issue occurs when initiating CORS requests from the local file system (using the file:// protocol). Chrome sets the Origin header to null, which may cause servers to return 403 errors since many server configurations reject requests with Origin: null.

Solutions include:

1. Using a local web server (such as Apache, Nginx, or Node.js)
2. Accessing files via HTTP protocol (e.g., http://localhost:8080/)
3. Configuring the server to allow null Origin (not recommended for production environments)

Complete Best Practices Solution

To ensure CORS works correctly across various browsers, the following comprehensive approach is recommended:

Server-Side Configuration

// Handle OPTIONS preflight requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
    header("Access-Control-Max-Age: 86400"); // 24-hour cache
    exit(0);
}

// Handle actual requests
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Expose-Headers: X-Custom-Header");

Client-Side Code Optimization

function makeCorsRequest(url, method, data) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        
        // Set necessary request headers
        xhr.setRequestHeader('Content-Type', 'application/json');
        
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error('Request failed: ' + xhr.statusText));
            }
        };
        
        xhr.onerror = function() {
            reject(new Error('Network error'));
        };
        
        xhr.send(JSON.stringify(data));
    });
}

// Usage example
try {
    const result = await makeCorsRequest('https://api.example.com/data', 'POST', {key: 'value'});
    console.log('Success:', result);
} catch (error) {
    console.error('Error:', error);
}

Debugging and Troubleshooting

When CORS requests fail, follow these debugging steps:

1. Check the Network panel in browser developer tools to examine request and response headers
2. Confirm whether preflight requests (OPTIONS) succeed
3. Verify that server response headers are correctly set
4. Check the console for CORS-related error messages
5. Use tools like curl or Postman to test API endpoints

By understanding Chrome's strict handling of CORS requests and properly configuring both client and server sides, developers can effectively resolve compatibility issues in cross-origin requests, ensuring web applications work correctly across all browsers.