How to implement Nginx cross-origin resource sharing (CORS) configuration

How to implement Nginx's cross-domain resource sharing (CORS) configuration requires specific code examples

With the popularity of front-end and back-end separation development, cross-domain resource sharing (CORS) ) problem became a common challenge. In web development, due to the browser's same-origin policy restrictions, client-side JavaScript code can only request resources with the same domain name, protocol, and port as the page where it is located. However, in actual development, we often need to request resources from different domain names or different subdomains. At this time, you need to use CORS to solve cross-domain problems.

Nginx is a powerful open source web server software that can be configured as a reverse proxy server to provide static resources and proxy requests. Implementing CORS configuration in Nginx can solve front-end cross-domain problems. Below, we will introduce in detail how to configure and implement CORS in Nginx.

First, add the following code block to the Nginx configuration file:

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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        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 = 'GET') {
        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';
    }
    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,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 code, we use the add_header directive to set the response header information and implement CORS configuration. Specifically, the Access-Control-Allow-Origin header is set to *, indicating that all origins are allowed. Then, we set the Access-Control-Allow-Methods header to allow the request methods to be GET, POST, and OPTIONS. Next, in order to support requests whose contentType is application/json and other formats, we set the Access-Control-Allow-Headers header. Finally, we use the Access-Control-Expose-Headers header to set the request headers that the server can return.

Next, restart the Nginx server to make the configuration take effect.

After the configuration is completed, Nginx will add CORS-related header information to the response based on the corresponding header information set. In this way, when the browser initiates a cross-domain request, the server will return these header information, and the browser can handle the cross-domain request normally.

It should be noted that due to the open nature of CORS configuration, there may be security risks. If necessary, you can limit the value of the Access-Control-Allow-Origin header to legal domain names based on specific business needs. In this way, only the specified domain name can request server resources across domains.

To sum up, using Nginx to configure CORS can effectively solve the front-end cross-domain problem. By setting corresponding response header information, we can achieve more flexible cross-domain resource sharing. I hope this article can be helpful to you and enjoy the joy of cross-domain development!

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