Nginx实现反向代理解决跨域

看了一下这篇文章https://www.cnblogs.com/ysocean/p/9392908.html

基本上对代理和反向代理的概念弄清楚了,并自己试验了反向代理,可以解决跨域请求数据的问题了。

代理简单来说,就是如果我们想做什么,但又不想直接去做,那么这时候就找另外一个人帮我们去做。
Nginx主要能够代理如下几种协议:
2、正向代理
弄清楚什么是代理了,那么什么又是正向代理呢?

  这里我再举一个例子:大家都知道,现在国内是访问不了 Google的,那么怎么才能访问 Google呢?我们又想,美国人不是能访问 Google吗(这不废话,Google就是美国的),如果我们电脑的对外公网 IP 地址能变成美国的 IP 地址,那不就可以访问 Google了。你很聪明,VPN 就是这样产生的。我们在访问 Google 时,先连上 VPN 服务器将我们的 IP 地址变成美国的 IP 地址,然后就可以顺利的访问了。

  这里的 VPN 就是做正向代理的。正向代理服务器位于客户端和服务器之间,为了向服务器获取数据,客户端要向代理服务器发送一个请求,并指定目标服务器,代理服务器将目标服务器返回的数据转交给客户端。这里客户端是要进行一些正向代理的设置的。

  PS:这里介绍一下什么是 VPN,VPN 通俗的讲就是一种中转服务,当我们电脑接入 VPN 后,我们对外 IP 地址就会变成 VPN 服务器的 公网 IP,我们请求或接受任何数据都会通过这个VPN 服务器然后传入到我们本机。这样做有什么好处呢?比如 VPN 游戏加速方面的原理,我们要玩网通区的 LOL,但是本机接入的是电信的宽带,玩网通区的会比较卡,这时候就利用 VPN 将电信网络变为网通网络,然后在玩网通区的LOL就不会卡了(注意:VPN 是不能增加带宽的,不要以为不卡了是因为网速提升了)。

  可能听到这里大家还是很抽象,没关系,和下面的反向代理对比理解就简单了。
3、反向代理
  反向代理和正向代理的区别就是:正向代理代理客户端,反向代理代理服务器。

  反向代理,其实客户端对代理是无感知的,因为客户端不需要任何配置就可以访问,我们只需要将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后,在返回给客户端,此时反向代理服务器和目标服务器对外就是一个服务器,暴露的是代理服务器地址,隐藏了真实服务器IP地址。

  下面我们通过两张图来对比正向代理和方向代理:

理解这两种代理的关键在于代理服务器所代理的对象是什么,正向代理代理的是客户端,我们需要在客户端进行一些代理的设置。而反向代理代理的是服务器,作为客户端的我们是无法感知到服务器的真实存在的。

  总结起来还是一句话:正向代理代理客户端,反向代理代理服务器。

想请求localhost:4000的/shoudao接口的数据,变成请求代理的3001url其余不变
<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.open('get','http://localhost:3001/shoudao',true);	
		xhr.send(null);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if(xhr.status >=200 && xhr.status<300 || xhr.status==304){
					console.log(xhr.responseText);
				}
			}
		};
</script>
server1.js
const express = require('express');
const app = express();

app.use(express.static(__dirname));

app.listen(3000,()=>{
	console.log('running...3000');
})
server2.js
const express = require('express');
const app = express();

app.get('/shoudao',(req,res)=>{
	res.send('收到啦');
});

app.listen(4000,()=>{
	console.log('running...4000');
})

Nginx需要做如下配置 nginx.conf

server {
        listen       3001;       (反向代理的端口号,与自己服务器端口错开)
        server_name  localhost;  (反向代理的域名)

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
	    proxy_pass   http://localhost:4000; #请求目标服务器地址(带端口)
            index  index.html index.htm;
			
		#add_header Access-Control-Allow-Origin *; #当前端只跨域不带cookie时,可为*
        #add_header Access-Control-Allow-Credentials true;
        }
启动nginx    在nginx目录里 start nginx
重新刷新配置项: nginx -s reload

结合Fiddler的篡改数据和修改在线js测试一下

往代理服务器传参name="xiaowang"
成功拦截数据
接下来测试修改js脚本,首先我先写一个div,js中指定背景是红色
引用了ceshi.js,使得div的背景是红色的

接下来试试用Fiddler替换线上js,将背景变为绿色

插曲:如果想抓取https,fiddler需要修改配置项Tools->FiddlerOptions->Https
勾选CaptureHttpsConnects和DecryptHttpstraffic 并在Actions里点最后一项重置全部证书,再点第一项信任证书。
在浏览器中把它下载到本地,修改背景颜色为绿色,文件名叫ceshi_new.js
成功修改之后,重新刷新页面
可以看到,文件还是ceshi.js,但是内容以及被我们改成绿色了