Cross-domain access configuration and CORS protocol support guide for setting up Nginx server

Nginx cross-domain access configuration and CORS protocol support guide for building a server

Introduction:
In current web application development, cross-domain requests have become a common requirement. To ensure security, browsers restrict cross-domain operations through AJAX requests by default. The CORS (Cross-Origin Resource Sharing) protocol provides developers with a reliable solution to achieve controllable authorization of cross-domain access.

Nginx is a high-performance web server and reverse proxy server. This article will introduce how to use Nginx to build the server's cross-domain access configuration and CORS protocol support.

1. Configuring cross-domain access to the server
   In order to authorize access from other domain names, we first need to add cross-domain access configuration to the Nginx configuration file. Open the Nginx configuration file (usually /etc/nginx/nginx.conf) and add the following configuration in the http section:

http {
    ...
    
    # 允许跨域访问
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
}

The above configuration allows access from all domain names (*) and supports GET, POST, OPTIONS methods. At the same time, we also specify some common request header information.

After saving and exiting the configuration file, reload the Nginx configuration to make it effective:

$ sudo nginx -s reload

2. Configure CORS protocol support
   After adding the cross-domain access configuration to the server, we Support for the CORS protocol can also be configured in a more fine-grained manner. The following is an example configuration that only allows cross-domain access to specified domain names:

http {
    ...
    
    # 配置CORS
    map $http_origin $allowed_origin {
        default "";
        ~^https?://(www.)?example.com$ $http_origin;
        ~^https?://(www.)?example.net$ $http_origin;
    }
    
    server {
        ...
        
        location / {
            if ($allowed_origin != "") {
                add_header 'Access-Control-Allow-Origin' $allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            
            ...
        }
    }
}

In the above configuration, we use the map directive to define a $allowed_originVariable, used to store domain names that allow cross-domain access. location / is configured in the server block, and the if directive is used to determine whether the domain name of the current request source is in the allowed list. If so, add the corresponding CORS header information. In addition, we can also add more rules according to our needs.

3. Preflight of CORS requests
   In some cases, cross-domain requests require preflight operations. For example, when custom request header information or non-simple requests (such as PUT, DELETE, etc.) are used. A preflight request is an OPTIONS request sent before the actual request to obtain the server's authorization for the actual request.

In order to support preflight requests, we only need to add the following configuration in the location / block:

location / {
    ...
    
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $allowed_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        return 204;
    }
    
    ...
}

In the above configuration, when the request method is OPTIONS, we return 204 (No Content) and add CORS header information.

Conclusion:
Through the above configuration, we can easily build the server's cross-domain access configuration and CORS protocol support. Whether it is a simple cross-domain request or a complex preflight request, Nginx can provide flexible and reliable solutions.

References:

• [Nginx official documentation](https://nginx.org/en/docs/)
• [CORS official documentation](https ://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

The above is the detailed content of Cross-domain access configuration and CORS protocol support guide for setting up Nginx server. For more information, please follow other related articles on the PHP Chinese website!