前端代理，解决跨域

1，Nginx与Node

在工作上，由于工作平台和语言的原因，对于大部分前端开发人员来说，更倾向于用Nodejs来搭建服务器，进而实现一些需求，对Nginx有天然的抗拒感。的确，Nginx中的绝大部分功能，如果单纯的使用Node.js也可以满足和实现。但实际上，Nginx和Node.js并不冲突，都有自己擅长的领域：Nginx更擅长于底层服务器端资源的处理（静态资源处理转发、反向代理，负载均衡等），Node.js更擅长于上层具体业务逻辑的处理。两者可以实现完美组合，助力前端开发。

2，反向代理

正向代理：

• 翻墙工具其实就是一个正向代理工具。它会把 们访问墙外服务器server的网页请求，代理到一个可以访问该网站的代理服务器proxy，这个代理服务器proxy把墙外服务器server上的网页内容获取，再转发给客户。

反向代理：

• 客户端发送的请求，想要访问server服务器上的内容。但将被发送到一个代理服务器proxy，这个代理服务器将把请求代理到和自己属于同一个LAN下的内部服务器上，而用户真正想获得的内容就储存在这些内部服务器上。

• 这里proxy服务器代理的并不是客户，而是服务器，即向外部客户端提供了一个统一的代理入口，客户端的请求，都先经过这个proxy服务器，至于在内网真正访问哪台服务器内容，由这个proxy去控制。

为什么要Nginx反向代理

使用反向代理最主要的两个原因：

• （1）安全及权限。

  ​ 可以看出，使用反向代理后，用户端将无法直接通过请求访问真正的内容服务器，而必须首先通过Nginx。可以通过在Nginx层上将危险或者没有权限的请求内容过滤掉，从而保证了服务器的安全。

• （2）负载均衡。

  ​ 单个服务器解决不了，我们增加服务器的数量，然后将请求分发到各个服务器上，将原先请求集中到单个服务器上的情况改为请求分发到多个服务器上，将负载分发到不同的服务器，也就是我们所说的负载均衡。

3，前后端分离项目

（1）vue项目中的配置

• 在vue.config.js文件中，我们需要配置：（vue-cli 3.0）

devServer: {
  //代理列表
  proxy: {
    '/api': {
        target: 'http://172.31.46.4:8088', //要代理的域名
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': ''  // 这个是定义要访问的路径，名字随便写
        }
    }
  }
}

• 在config/index.js文件中，我们需要配置：（vue-cli 2.0）

 dev: {
    proxyTable: {
      '/api': {
          target: 'http://172.31.46.4:8088', //要代理的域名
          changeOrigin: true,//允许跨域
          pathRewrite: {
            '^/api': ''  // 这个是定义要访问的路径，名字随便写
          }
      }
    }
  }

/api/getUserMsg 相当于 http://172.31.46.4:8088/getUserMsg

/api相当于http://172.31.46.4:8088

this.$http.get("/api/getUserMsg", {
 }
 .then(res => {
 })
 .catch(function(error) {
 });

• 配置多个代理地址：

情形：某个项目时，由于是多个后端配合（A写一般任务的接口，B写技术预研的接口），出现了多个端口。因此，前端也需要配置多个代理。

 devServer: {
    //代理列表
    proxy: {
      '/mps-ss': {
        target:'http://xxxxxx:7890',//线上1
        changeOrigin: true,
        pathRewrite: {
          '^/mps-ss': '/mps-ss'
        }
      },
      '/mps-fileApi': {
        target:'http://xxxxx:7777',//线上2
        changeOrigin: true,
        pathRewrite: {
          '^/mps-fileApi': '/mps-fileApi'
        }
      },
      '/mps-video': {
        target:'http://xxxxxx:8090',//返回播放地址
        changeOrigin: true,
        pathRewrite: {
          '^/mps-video': '/mps-video'
        }
      }
    }
  }

这个时候，我们可能会疑惑，为什么有的pathRewrite这个对象，内容不同。

// 情况一：
'/api': {
  target:'http://172.31.242.10:7890',
  changeOrigin: true,
  pathRewrite: {
      '^/api': '/api'
  }
}
//上下两个pathRewrite对比，会发现，匹配^/mps-ss会等于 '/mps-ss'，另一个是 匹配^/mps-ss会等于 '/'

// 情况二：
'/api': {
  target:'http://172.31.242.10:7890',
  changeOrigin: true,
  pathRewrite: {
     '^/api': ''
  }
}

这因为，后端接口匹配的路由不同。

• 例如：（以nodejs模拟的接口），针对情况一

• （以nodejs模拟的接口），针对情况二

app.get('/cars',(req,res)=>{
  let data = [
      {name:'宝马',price:'32万',sell:1230192},
      {name:'奥迪',price:'23.4万',sell:21091},
      {name:'奔驰',price:'46万',sell:721912}

  ]
  res.send(data)
})

（2）react配置跨域（两种）

（1）（在package.json里配置proxy）， 单一代理

• 1，如代理到本地服务器5000端口， "proxy":"http://localhost:5000"
• 2，本地服务器是由nodejs启动的（express）。路由：app.get('/getStudentsMsg',(req,res)=>{})。所以，在axios做请求数据时，直接请求：'http://localhost:3000/getStudentsMsg'。（详情查看`app.js`文件中的button点击事件）

（2）（不在 package.json里配置proxy，而在项目目录src/下新建setupProxy.js文件）， 多个代理

如果在package.json文件中配置：（报错:提示只支持string类型,不支持object.）

  "proxy":{
   "/api": {
     "target": "http://172.19.5.35:9536",
     "ws": true
    },

  "/apc": {
     "target": "http://179.19.5.35:9536",
     "ws": true
    }
  },

解决方法：

• 安装http-proxy-middleware管理包，cnpm http-proxy-middleware --save（注意，在create-react-app脚手架已经下载好了依赖。此步骤可以省略）
• 在项目目录src/下新建setupProxy.js文件，然后写入如下代码:

      //做多个代理的配置文件
      const proxy = require('http-proxy-middleware');
      module.exports = function (app) {
          app.use(
              proxy(
                  '/api', {  //遇见 /api前缀的请求，就会触发该代理配置
                      target: 'http://localhost:5000',
                      changeOrigin: true,  // 控制服务器接收到的请求头host的值
                      pathRewrite: {
                          "^/api": "/api"   
                      }
                  }),
              proxy(
                  '/apc', {
                      target: 'http://localhost:7000',
                      changeOrigin: true,
                      pathRewrite: {
                          "^/apc": ""  
                      },
                  }
              )
          )
      };

4，还有一个知识点（ bypass）：主要是本地调试 走uap网关的项目。

• 首先本地想要调试项目（集成uap），最简单的方式：需要打开线上环境，通过uap登录进入项目
• 进入项目后，打开Network，拿到cookie值
• 拿到cookie值后，将值放到项目的配置文件。
• 替换：req.headers.cookie
• 重启前端项目： cnpm run dev / yarn start