Keywords: AJAX | Cross-Origin Requests | CORS
Abstract: This article delves into the phenomenon where AJAX cross-origin requests in Chrome automatically send OPTIONS preflight requests instead of the specified HTTP methods. By analyzing the CORS (Cross-Origin Resource Sharing) mechanism, it explains the triggers for preflight requests, including non-simple request methods and the use of custom headers. With jQuery code examples, the article details the design principles behind browser security policies and provides insights into technical backgrounds and solution approaches, helping developers understand and address this common cross-origin development challenge.
The OPTIONS Preflight Mechanism in Cross-Origin AJAX Requests
In modern web development, cross-origin AJAX requests are a common requirement, but browser security policies impose restrictions on such requests. Users report that in Chrome, all AJAX requests are sent as OPTIONS methods instead of the defined GET, POST, etc. This phenomenon typically occurs in cross-origin scenarios, such as when a website runs on localhost:6120 and the server is on localhost:57124; even on the same machine, different ports are considered different origins.
The root cause lies in the CORS (Cross-Origin Resource Sharing) mechanism. When a browser detects a cross-origin request, it decides whether to send a preflight request based on the request type. The preflight request uses the OPTIONS method to query the server about whether the actual request is allowed. If the server response includes appropriate CORS headers (e.g., Access-Control-Allow-Origin), the browser then sends the original GET, POST, etc., request.
Conditions Triggering Preflight Requests
According to the CORS specification, preflight requests are automatically triggered under the following conditions:
- The request uses methods other than GET, HEAD, or POST, such as PUT or DELETE.
- For POST requests, the Content-Type is not
application/x-www-form-urlencoded,multipart/form-data, ortext/plain. For example, when sending JSON data, the Content-Type is usuallyapplication/json, which triggers preflight. - The request includes custom headers, such as
"x-li-format": "json"and"X-UserName": userNamein the example.
In the provided code, although type: "POST" is specified, the inclusion of custom headers in headers causes Chrome to send an OPTIONS preflight request first. This is a security design in browsers to prevent potential data leakage risks, not an error in jQuery or the code.
Technical Implementation and Solutions
Developers can configure the server-side to support CORS, thereby allowing cross-origin requests. For example, add CORS headers in the server response:
Access-Control-Allow-Origin: http://localhost:6120
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: x-li-format, X-UserNameThis way, when the OPTIONS preflight request arrives, the server returns these headers, and after the browser confirms safety, it sends the original POST request. Another approach is to avoid cross-origin requests, such as using a proxy server or deploying the front-end and back-end on the same origin, but this may not suit all architectures.
In summary, Chrome sending OPTIONS requests is normal behavior under the CORS mechanism. Developers should understand its principles and properly handle server-side configurations to ensure smooth cross-origin AJAX requests.