nginx configuration does not work across domains, as follows

server {
        listen       80;
        server_name  localhost;
        
        # Interface forwarding
        location /api/ {
            # Allow request address cross domain * as wildcard
            add_header 'Access-Control-Allow-Origin' '*';
            # Set request method cross domain
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            # Set whether cookie transfer is allowed
            add_header 'Access-Control-Allow-Credentials' 'true';
            # Set request header why not set wildcard here * because it is not supported
            add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
            # Set up reverse proxy 
            proxy_pass 127.0.0.1:8081/;
        }
 }

• The cross domain configuration of nginx on the Internet is mainly the above version. However, many of them are copying, not really practicing, so I wrote the following article to remind people in need, not blindly copying, learning to analyze.

nginx will take effect after you modify the following configuration

server {
        listen       80;
        server_name  localhost;
        
        # Interface forwarding
        location /api/ {
            # Allow request address cross domain * as wildcard
            add_header 'Access-Control-Allow-Origin' '*';
            # Set request method cross domain
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            # Set whether cookie transfer is allowed
            add_header 'Access-Control-Allow-Credentials' 'true';
            # Set request header why not set wildcard here * because it is not supported
            add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
            
            # Set options request processing
            if ( $request_method = 'OPTIONS' ) { 
                return 200;
            }
            # Set up reverse proxy 
            proxy_pass 127.0.0.1:8081/;
        }
    }

The main difference between the two codes is the following line of code

if ( $request_method = 'OPTIONS' ) { 
     return 200;
}

Because the post request browser will send an options pre check request, which mainly sends the request to the server. If the server allows it, it will send the real post request, so f12 sees that often the post will send two requests. Because the back-end java code does not process the options request, the options interface request is reported as 403 forbidden. Here, nginx's request for options directly returns 200, which does not need to reach the interface layer, and allows the post response header directly, so that the above failure configuration can be effective.

With a little knowledge

• proxy_pass 127.0.0.1:8081/;

To solve this problem in reverse agent;

Visit http://localhost/api/user/login;

• Add / to access 127.0.0.1:8081/user/login;
• Without / the actual access is 127.0.0.1:8081/api/user/login;

Adding slash means that all / api requests will be forwarded to the root directory, that is to say, the / api will be / replaced. At this time, the interface path will change, with one layer / api missing. And without slashes? This means that the path of / api will not be lost when forwarding to the domain name 127.0.0.1:8081.