反向代理与正向代理

一、概念

　　1.正向代理

　　　　正向代理即是客户端代理, 代理客户端, 服务端不知道实际发起请求的客户端

　　　　

　　　　先搭建一个属于自己的代理服务器
　　　　1)用户发送请求到自己的代理服务器
　　　　2)自己的代理服务器发送请求到服务器
　　　　3)服务器将数据返回到自己的代理服务器
　　　　4)自己的代理服务器再将数据返回给用户

　　2.反向代理

　　　　反向代理即是服务端代理, 代理服务端, 客户端不知道实际提供服务的服务端

　　　　1)用户发送请求到代理服务器
　　　　2)反向代理服务器发送请求到真正的服务器
　　　　3)真正的服务器将数据返回给反向代理服务器
　　　　4)反向代理服务器再将数据返回给用户

二、各自作用

　　正向代理的作用：

　　（1）访问原来无法访问的资源，如google

       （2） 可以做缓存，加速访问资源

　　（3）对客户端访问授权，上网进行认证

　　（4）代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息　

　　反向代理的作用：

　　（1）保证内网的安全，阻止web攻击，大型网站，通常将反向代理作为公网访问地址，Web服务器是内网

　　（2）负载均衡，通过反向代理服务器来优化网站的负载

三、实际应用

　　FQ软件------正向代理

　　　咋们国内访问www.google.com是被禁止的，会被GFW限制访问。那么如果想继续使用google 科学规范的上网就需要一些代理（FQ软件），通过他们去请求www.google.com，代理再把响应结果返回给你。

　　　　GFW 的作用主要是用于分析和过滤中国境内外网络间的互相访问。也就是说，他不仅能限制国内网民访问境外的某些站点，也能限制国外用户访问国内的站点。 我们通常说的“被墙”，就是指访问被 GFW 所限制。而”FQ“，顾名思义，则是突破 GFW 的限制。

　　Nginx服务器-------反向代理（vue+nginx实现服务端跨域）　

　　　把vue项目打包发布之后，调用接口会提示404错误，这时还需要在nginx中做一下反向代理，在服务器中找到nginx的配置文件nginx.config，在需要添加反向代理的配置项中添加如下：

location /api {

                rewrite ^.+api/?(.*)$ /$1 break; //可选参数，正则验证地址

                include uwsgi_params; //可选参数，uwsgi是服务器和服务端应用程序的通信协议，规定了怎么把请求转发给应用程序和返回

                proxy_pass http://www.xxx.com;// 此处修改为自己的请求地址，必填

        }

 

四、附

　　使用Nginx代理跨域需要对vue项目配置一下：

　　在实现vue的跨域访问之后，为了方便本机调试和发布，可以在vue中设置不同的环境变量，使项目在不同的环境中自动调用不同的接口地址

　　需要文件：

　　1） .env 无论开发环境还是生成环境都会加载　　

　　　　.env 文件内容：NODE_ENV = production

 　  2）.env.development 开发环境加载这个文件　

　　　　　.env.development 文件内容：NODE_ENV = development

　　　　　VUE_APP_BASE_URL = http://localhost:8080/

　　3） .env.production 生成环境加载这个文件　　　

　　　　　NODE_ENV = production

　　　　VUE_APP_BASE_URL = http://www.xxx.com/

文件加载顺序：

首先加载.env文件，判断当前的项目环境，

如果是开始环境，则继续加载.env.development的内容，

如果是生产环境，则加载.env.production的内容,

ps：测试发现，当前的系统环境并不是.env文件中的NODE_ENV =xxx 确定的，而是根据实际情况决定，

如在ide中使用npm run serve调试，则加载的是.env.development文件

如果执行npm run build 之后发布到服务器，则加载的是.env.production文件

pageage.json的scripts部分如下

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

在项目main.js文件可以打开查看当前的系统变量：

console.log('process.env',process.env)

设置完之后，在开始的vue.config.js代理文件中，将target指向改为： process.env.VUE_APP_BASE_URL

之后，vue会根据执行环境的不同自动加载相应的接口地址