Use nginx across domains in front-end development to resolve no Access-control-allow-origin header localhost:63342 is not allowed Access

Nginx is a reverse proxy server, forward proxy server and reverse proxy server differences do not repeat, there are a lot of good pictures a look will know.

Front-End and back-end servers will be encountered on different IP in front of development, this is if the direct AJAX remote backend server, will be the error

Failed to Loadhttp://10.100.122.138:8081/qrapp-service/bus/getstationbyline?busline=1

: No ' Access-control-allow-origin ' header is present on the requested resource. Origin ' http://localhost:63342 ' istherefore not allowed access.

Here's how to implement Cross-domain using Nginx

First draw the schematic diagram, in the narrative configuration method

Requirements: Two servers can be accessed in front-end Ajax, one is deployed on the local (ip:10.100.122.132) 8080 Port Tomcat, one is deployed on the LAN another machine (IP : 10.100.122.138) Tomcat on port 8081

Schematic diagram:

Nginx configuration file:

Configure two servers

#转发到本地8080端口的配置
    server {
		#监听端口
        listen       ;
		
		#域名可以有多个, separated
		server_name 10.100.122.132 by Space  ;
		
        Location  /{
			proxy_pass http://10.100.122.132:8080;			
			Add_header ' access-control-allow-origin ' http://localhost:63342 ';
            SSI on  ;
        }		
    }
	
	#转发到10.100.122.138 8081 Port configuration
    server {
		#监听端口
        listen       8082;
		
		#域名可以有多个, separated
		server_name 10.100.122.132 by Space  ;    
				 
        location/qrapp-service/{
            proxy_pass  http://10.100.122.138:8081/qrapp-service/;
			SSI on  ;
			Add_header ' access-control-allow-origin ' http://localhost:63342 ';			
        }