接口转发篇

webpack 转发

我们在开发阶段经常会用到 webpack-dev-server 来启动本地服务，其实就是起了一个 node 中的 express 服务。当我们在与后端的联调阶段，有两种方式

后端把代码部署到测试环境，然后我们直接联测试环境开始调

使用 devServer 中的 proxy 去转发到后端，我们需要在所有的接口前加一个级 /api（这个自己定），然后在转发的时候把这个 /api 在去掉

proxy: {
    '/api': {
      target: '192.168.99.216:8081',
      pathRewrite: { '/api': '' }
    }
}

nginx 转发

前后端分离开发、部署

nginx 转发也是同一个道理，匹配 /api 并转发到后台

nginx 中具体配置是这个样子

server {
  location / {
      proxy_pass http://xxxx:8888/;  // 将静态文件请求转发到前端服务器
  }
  location /api {
      proxy_pass http://xxxx:9999/;  // 将接口请求转发到后端服务器，并且去掉 /api
  }
}

页面上自定义 nginx 的转发地址

场景：多个任务并行，但是前端的工作量比较少，后端多。所以前端的活儿你一个人干，后端一个任务一个人。然后就会出现这种情况：

你很快把活儿给干完了，然后部署到了测试环境。但是后端还在开发啊，当你在专注着撸代码的时候，他们经常会过来找到你，要求你本地启动，并且联他们本地的 ip 来联调，你经常被打断，工作效率特别低，你不胜其烦。

于是你就想有没有一个环境，让后端自己可以配置接口的访问地址呢？

有啊！测试环境不就是现成的吗？我们只要让测试环境的 nginx 服务器把接口转发到后端本地的 ip 地址不就行了吗？

那么 nginx 怎么知道这条请求应该被到哪里呢？我们需要给它一个标志，在 http 报文头部增加一个字段，专门用于 nginx 转发到自定义的地址，例如：

这个 ip 地址和端口肯定不能代码里写死，得在页面上让后端自己去配置。可以在页面上做一个弹窗，只在测试环境下才有按钮可以让它弹出

然后在发出 ajax 请求前，把这个 ip:port 设置到 http request header 里，这样 nginx 在接收到带有这个自定义的头时，就知道该转发到哪里了。

nginx 配置如下

location /api {
    if ($http_x_api_target) {   // x_api_target 就是我们自定义的头字段
        proxy_pass      http://$http_x_api_target/$1;   // 这是页面上设置的后端本地的地址
    } else {
        proxy_pass   http://172.31.3.234:8080/; // 这是测试环境的服务端地址
    }
}