How to do nginx cross-domain

Cross-domain request issues can be solved by modifying response headers in nginx configuration, including allowing all domain access, domain-specific access, specific method and header access, carrying credential access, and handling preflight requests (OPTIONS). Through these configurations, cross-domain issues will be resolved.

nginx cross-domain solution

Cross-domain issues

Cross-domain issues are when the browser restricts direct access to resources in another domain from web pages in one domain, resulting in the failure of AJAX requests.

nginx cross-domain solution

nginx solves cross-domain problems by modifying response headers:

1. Allow all domain access (unsafe)

 <code>add_header Access-Control-Allow-Origin *;</code>

2. Allow access to specific domains

 <code>add_header Access-Control-Allow-Origin https://example.com;</code>

3. Allow specific methods and headers

 <code>add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE; add_header Access-Control-Allow-Headers Content-Type, Authorization;</code>

4. Allow credentials (such as cookies)

 <code>add_header Access-Control-Allow-Credentials true;</code>

5. Pre-flight request (OPTIONS)

For non-simple requests (such as POST), the browser will send an OPTIONS preflight request to check whether the server allows the request. nginx can respond to OPTIONS requests using the following configuration:

 <code>location / { if ($request_method = OPTIONS) { add_header Access-Control-Allow-Origin https://example.com; add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE; add_header Access-Control-Allow-Headers Content-Type, Authorization; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Max-Age 3600; return 204; } # 其余配置... }</code>

Configuration example

 <code>server { listen 80; server_name www.example.com; location / { add_header Access-Control-Allow-Origin https://example.com; add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE; add_header Access-Control-Allow-Headers Content-Type, Authorization; # 其余配置... } }</code>

After completing the above configuration, the cross-domain problem will be resolved.

The above is the detailed content of How to do nginx cross-domain. For more information, please follow other related articles on the PHP Chinese website!