nginx正向代理解决跨域问题

原理

为了更好的理解nginx解决跨域的原理，首先来了解一下跨域是怎么样产生的。
因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。而同源策略只存在浏览器中，即浏览器与服务器进行通信的时候才需要遵循同源策略，服务器与服务器之间则不需要遵循。nginx就扮演着浏览器与服务器之间的代理服务器，实现与浏览器同源来进行数据的传输。

配置

1、首先分析请求接口

 axios.get('http://www.aaa.com:8081/api/blog/getList').then(res=>{
          console.log(res)
        })

这里请求的服务器接口地址是 http://localhost:8081/api/blog/getList，然后就可以配置nginx了

2、将请求改成与网站同源的地址

假设当前发送请求的网站地址为http://www.aaa.com（默认端口80），则将请求地址修改为与网站同源的地址。

 axios.get('http://www.aaa.com/api/blog/getList').then(res=>{
          console.log(res)
        })

3、找到 /…/nginx/conf 目录下的 nginx.conf 文件，进入文件进行配置

http      
{
	...
	server
	{
	    #表示监听发送请求的地址(www.aaa.com:80)
        listen       80; 
        server_name  www.aaa.com;
        #如果监听到请求接口地址是 www.aaa.com/api/blog/getList ，nginx就向http://www.aaa.com:8081/api/blog/getList 这个地址发送请求
        location /api/ { #判过滤出含有api的请求
            proxy_pass http://www.aaa.com:8081; #真实服务器的地址
        }
 	}
}

这里实现的是最简单的配置，如果需要更多具体的配置属性请访问：nginx配置详解

4、测试配置文件（nginx.conf），然后重启nginx

4.1、测试配置文件：

nginx -t

4.2、执行以下语句重启nginx

nginx -s reload

或者

#停止nginx
nginx -s stop
#启动nginx
nginx

完成上面的操作再发送请求就能成功获取到数据，这样就实现了nginx的正向代理解决跨域问题了。