How to implement cross-origin resource sharing (CORS) support through Nginx proxy server?

How to implement cross-domain resource sharing (CORS) support through Nginx proxy server?

Introduction:
Cross-Origin Resource Sharing (CORS) is a mechanism that allows the server to grant Access rights to specific resources. In practical applications, it is often necessary to achieve resource sharing through the Nginx proxy server. This article will introduce how to support CORS through Nginx configuration.

Step 1: Install and configure Nginx

1. Install Nginx
First, make sure Nginx is installed on the server. If it is not installed, please choose the appropriate installation method according to the operating system.

2. Edit Nginx configuration file
Use a text editor to open the Nginx configuration file, usually located at /etc/nginx/nginx.conf or /etc/nginx/ conf.d/default.conf.

3. Add CORS configuration
Add the following code in the server block of the configuration file to enable CORS support:

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

The above configuration will allow any origin Requests make cross-domain access and allow common request methods (GET, POST, OPTIONS). 'Access-Control-Allow-Headers' specifies the allowed request headers, and 'Access-Control-Expose-Headers' specifies the allowed response headers.

4. Save and restart Nginx
Save the configuration file and restart the Nginx service to make the configuration take effect. You can use the following command to restart Nginx:

sudo service nginx restart

Step 2: Test CORS support

In order to verify the validity of the CORS configuration, we can use the browser's development tools to view the request and response header information .

1. Open the browser development tools
Open the developer tools in the browser (usually press the F12 key) and switch to the "Network" tab.

2. Send cross-domain requests
Send cross-domain requests through JavaScript code or directly enter a cross-domain address in the browser address bar. For example, assume that the address of our Nginx proxy server is http://example.com, and the cross-domain URL we want to access is http://api.example.com/data.

3. View request and response headers
In the "Network" tab of the developer tools, select the corresponding request and click it to expand the details. Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers# can be found in the request and response headers. ## and other related header information to confirm CORS support.

Summary:

By configuring Nginx, we can easily implement cross-domain resource sharing (CORS) support. Simply add some header information to the Nginx configuration file to enable the Nginx proxy server to support CORS. This ensures that cross-domain requests work properly between different domains.

The above is the detailed content of How to implement cross-origin resource sharing (CORS) support through Nginx proxy server?. For more information, please follow other related articles on the PHP Chinese website!