前端开发中使用nginx跨域解决No Access-Control-Allow-Origin header localhost:63342 is not allowed access

nginx是反向代理服务器，正向代理服务器与反向代理服务器的区别不赘述，有很多好的图片一看便知。

在前端开发时会遇到前端和后台服务器在不同IP上的情况，这是如果直接ajax 远程后台服务器，会报错

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.

 

这里介绍使用nginx实现跨域的方法

先画出原理图，在叙述配置方法

需求：在前端ajax中可以访问两个服务器，一个是部署在本机（IP:10.100.122.132）8080端口上的tomcat，一个是部署在局域网上另一台机器（IP:10.100.122.138）8081端口上的tomcat

原理图：

nginx配置文件：

配置两个server

#转发到本地8080端口的配置    server {#监听端口        listen       80;#域名可以有多个，用空格隔开server_name  10.100.122.132;        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端口的配置    server {#监听端口        listen       8082;#域名可以有多个，用空格隔开server_name  10.100.122.132;             location /qrapp-service/ {            proxy_pass  http://10.100.122.138:8081/qrapp-service/;ssi  on;add_header 'Access-Control-Allow-Origin' 'http://localhost:63342';        }    }