Nginx，Charles与Webpack配置前端API代理教程(超详细)

为何前端须要配置API代理？

咱们在开发一个项目的时候，若是服务采用的是分布式部署，也就是说按不一样模块或功能部署于不一样的服务器，以下图

客户端不一样的请求会被主服务器转发到对应的服务器上去，若是在开发阶段，也有一个这样作转发的服务器，那么前端的开发是不须要配置代理的，咱们今天要探讨的是开发阶段无转发服务器，须要前端配置代理的状况，以下图

你们都知道，浏览器是存在跨域限制的，处于安全性考虑，服务器ABC不可能设置为容许任何请求均可以访问，So, 咱们配置前端API的代理的目的其实就是为了解决跨域问题，前端按照既定的规则配置好代理以后，就能保证开发阶段和线上部署服务的一致。

配置前端API代理的三种方式

本文以配置Dva项目的代理为示例，由于Dva项目的脚手架自带Mock功能，省去了本身写接口的麻烦，同时公司内部项目也采用此技术，能让团队人员也作一参考。

示例地址：github.com/ranshaw/fro…

拉取代码，安装依赖以后，访问http://localhost:8000（默认是8000端口，若是被占用，会在其余端口），就能看到Welcome to dva的欢迎页面。项目中.roadhogrc.mock.js为Mock数据的配置文件，现为

在浏览器中输入 http://localhost:8000/users/1 就能看到返回的是你在.roadhogrc.mock.js中配置的数据

咱们最终要达成的目的:

1. 使用www.frontproxy.com访问开发环境，即在浏览器输入www.frontproxy.com等同于输入localhost:8000。
2. 将users、todos、posts模块也就是请求路径中以/users/、/todos/、/posts/开始的请求接口，都代理到不一样的服务器。
3. 最终实现请求如 www.frontproxy.com/users/1 返回的数据为请求 jsonplaceholder.typicode.com/users/1 返回的数据

注：本文中将三个模块的请求都代理到 jsonplaceholder.typicode.com 上；为了测试方便都采用Get请求，其余请求方式同Get方式；下文中讲述的配置方法以Mac为例，Windows上原理一致，具体方法需自行google。

配置Nginx和Hosts实现

配置Hosts

在mac终端输入 sudo vi /etc/hosts，对Hosts文件进行编辑，添加以下配置 127.0.0.1 www.frontendproxy.com

而后保存。若是对Vim命令不了解，点击 Vim命令详解学习。

如今咱们访问www.frontproxy.com:8000和访问localhost:8000的效果是同样的，

由于Hosts配置的映射关系，不支持自定义端口，因此如今访问的时候还必需要加上端口，下面咱们会经过Nginx配置，将url中端口去掉。

配置Nginx

安装好Nginx以后，在Mac终端输入 cd /usr/local/etc/nginx 找到nginx.conf文件，可以使用软件打开或者继续输入vi nginx.conf 添加以下配置

server {
        listen 80;
        server_name www.frontendproxy.com;
        index index.html;
        location / {
            proxy_pass http://127.0.0.1:8000/;
        }
    }
复制代码

在终端输入 sudo nginx，启动Nginx,此时在浏览器输入 www.frontendproxy.com 就能够正常显示了，可是当你修改页面的内容你会发现，http://localhost:8000 能够自动刷新，更新你刚才修改的内容，www.frontendproxy.com 页面并无自动刷新，手动刷新后修改的内容才显示出来，而且页面中有一个报错

webSocket通讯出了问题，咱们须要添加以下配置

location /sockjs-node/ {
    proxy_pass http://127.0.0.1:8000/sockjs-node/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";	
 }
复制代码

在终端输入sudo nginx -s reload 重启nginx,而后发现报错消失，修改页面内容后，能够自动刷新页面了。

到这一步，咱们可使用域名访问本地项目，进行愉快的开发了，可是请求users模块的数据仍然是Mock中的数据，

咱们在Nginx中添加以下配置，对users模块的请求进行代理，

location /users/ {
    proxy_pass http://jsonplaceholder.typicode.com/users/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
复制代码

在终端输入sudo nginx -s reload重启Nginx，再次请求 www.frontendproxy.com/users/1 你会发现返回的数据已经不是Mock配置的数据了，而是 jsonplaceholder.typicode.com/users/1 返回的数据，说明代理已经生效

同理对todos、posts模块进行配置，完整配置以下

server {
    listen 80;
    server_name www.frontendproxy.com;
    index index.html;
    location / {
        proxy_pass http://127.0.0.1:8000/;
    }
    location /sockjs-node/ {
        proxy_pass http://127.0.0.1:8000/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";	
     }
    location /users/ {
        proxy_pass http://jsonplaceholder.typicode.com/users/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /todos/ {
        proxy_pass http://jsonplaceholder.typicode.com/todos/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /posts/ {
        proxy_pass http://jsonplaceholder.typicode.com/posts/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
复制代码

OK,咱们如今已经完成了对users、todos、posts模块请求接口的代理，不一样模块对应的服务器的地址，均可以自定义设置。

Charles配置代理

Charles为Mac上一个超级好用的抓包软件，特别是对于移动端开发接口的调试，简直不要太爽，在此不作延伸，后续会专门写文章介绍,下载地址为： 连接: pan.baidu.com/s/1UCJu9KaB… 提取码: shfp。

若是你按照上文教程配置了Hosts和Nginx，请把相关配置都清除掉，而后咱们开始Charles的配置。

Charles并不能直接对Chrome进行抓包，须要对Chrome设置代理， 我这使用的是Chrome的一个插件SwitchyOmega，在SwitchOmega中配置代理，8888为Charles默认的端口，若是你更改过，请填写你更改后的端口

配置生效之后查看Chrome浏览器中代理的设置，

此时，经过Chrome浏览器发出的请求，就会被Charles抓住

如今咱们开始配置Charles的代理规则，以下图打开Charles中tools中的Map Remote

点击add按钮进行添加

如图将 www.frontendproxy.com 代理到 127.0.0.1：8000上，配置好以后，访问域名和访问IP效果是同样的，若是上文配置好Hosts和Nginx以后的效果，一样须要配置/sockjs-node/的代理，这样更改文件后能够自动保存了，下面添加users模块的代理

Charles代理规则的优先级是从上到下的，也就是说上面的规则会覆盖下面的规则，这点须要注意下

OK,到这里Charles代理前端API请求的配置就已经完成了。

Wepack + Host Switch Plus配置

如今前端开发环境中基本上都有用到webpack,其中webpack-dev-server这个包也是使用webpack搭建开发环境所必备的，咱们经常使用的自动刷新和热更新功能就是由它提供的，今天所要讲的proxy功能也是如此。

Host Switch Plus，顾名思义就是对host的管理工具，它是一个Chrome的插件，须要你在Chrome应用商店下载。

首先咱们先配置对域名的代理，支持单个添加和批量添加

添加完成以后，咱们点击插件的图标就能看到你刚才配置的信息，Enable为勾选，IP前面的圆点为绿色表示已生效

此时，访问 www.frontendproxy.com已经代理到 http://localhost:8000 上，咱们再打开项目中的 .webpackrc 文件，添加以下配置

{
  "proxy": {
  "/sockjs-node/": {
    "target": "http://127.0.0.1:8000/",
    "changeOrigin": true
  },
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true
  },
  "/todos/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true
  }
}
}
复制代码

好了，关于webpack配置代理的操做，到这里也完成了，关于webpack-dev-server中proxy配置的详细规则，请点击查看，我这里再也不一一讲述。

注意： 若是你如今使用的是Nginx配置的代理，如今想转为webpack配置代理，假如要代理的模块为/users/,指望代理的接口地址为http://localhost:8000/login,Nginx和Webpack的配置分别以下，最终代理服务器发出的请求为http://jsonplaceholder.typicode.com/login,Webpack的配置项要多加一项配置pathRewrite，对代理服务器的路径进行重写，将请求中的/users/替换为/,有时候后端会须要请求头中的某些值，这时候就须要添加自定义请求头（版本webpack-dev-server@3.1.7），以下：

Nginx配置：
 location /users/ {
        proxy_pass http://jsonplaceholder.typicode.com/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 Webpack配置：
 {
  "proxy": {
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true，
    "pathRewrite": { "^/users/": "/" }，
    "headers":{
       // 你须要定义的请求头
       Host: "localhost:8000"
    }
  },
}
}
复制代码

总结

下面是划重点时间，咱们从适用范围、配置难易、团队协做成本三个方面对比一下这三种配置方式

国庆节的一天就这么过去了，以为有帮助的童鞋，帮忙点个👍哟！