Nginx、Charles和Webpack配置前端API代理教程

为什么前端需要配置API代理？

当我们开发项目时，服务采用分布式部署时，即按照不同的模块或功能部署在不同的服务器上，如下图

来自客户的不同请求由客户转发。主服务器去对应的服务器。如果开发阶段有服务器做这个转发，那么前端开发就不需要配置代理了。今天我们讨论的是开发阶段没有转发服务器，需要配置前端代理的情况，如下图。

大家都知道浏览器是有跨域限制的。出于安全原因，服务器 ABC 不能设置为允许所有请求访问。所以，配置前端API的代理的目的其实是为了解决跨域问题，前端按照既定的规则配置好代理后，可以保证各代理之间的一致性开发阶段和在线部署服务。

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

本文以Dva项目的代理配置为例。由于Dva项目的脚手架自带了mock功能，省去了自己写接口的麻烦。同时，公司内部的项目也使用了该技术，也可以作为团队成员的参考。

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

拉取代码，安装完依赖后，访问http://localhost:8000（默认是8000端口，如果被占用，则转至其他端口） ports），然后就可以在 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

类型Sudo VI /ETC /HOSTS到下面的Mac终端文件中，添加到下面的Mac终端。配置 127.0.0.1 www. frontendproxy.com

然后保存。如果您不懂Vim命令，请点击Vim命令详细学习。现在当我们访问www.frontproxy.com:8000时，效果和我们访问localhost:8000时的效果是一样的。

由于主机配置的映射关系，不支持自定义端口。现在访问的时候必须添加所谓的端口，如下我们使用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并启动终端。这时候在浏览器中输入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，然后发现错误消失了。更改页面内容后，页面可以自动刷新。

此时我们可以使用域名访问本地项目并愉快地开发了，但是向用户模块请求的数据仍然是mock中的数据。

我们在 Nginx 中为 user 模块添加以下配置 要请求代理，

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.usersproxy/1com。再次。你会发现返回的数据不再是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。

如果您已经按照上述教程在Nginx中配置了hosts，请删除所有相关的配置，然后我们开始Charles的配置。

Charles 无法直接在 Chrome 上捕获数据包。您需要为 Chrome 设置代理。我使用 SwitchyOmega，一个 Chrome 插件。我在 SwitchOmega 中配置代理。 8888 是 Charles 的默认端口。如果您已更改，请填写。在......之外。更改的端口

配置生效后，请检查 Chrome 浏览器中的代理设置。

此时，通过Chrome浏览器发送的请求被Charles捕获了

现在我们开始配置Charles的代理规则，如下图，打开Charles中的Map Remote和Tools

点击添加按钮

如图所示，将www.frontendproxy.com代理到127.0.0.1:8000。配置完成后，访问域名和访问IP的效果是一样的。如果是上面配置完hosts和Nginx后的效果，还需要配置/sockjs-node/的代理，这样文件修改后会自动保存。接下来添加用户模块的代理

Charles 代理规则的优先级 级别是从上到下，也就是说上面的规则覆盖下面的规则。这个一定要注意

OK。至此，Charles Proxy前端API请求的配置就完成了。

Wepack + Host Switch 加配置

Webpack 主要用于前端开发环境。使用Webpack搭建开发环境还需要webpack-dev-server包。我们一般使用的自动刷新和暖更新功能都是由它提供的，比如我们今天说的代理功能。

Host Switch Plus，顾名思义，是一款主机管理工具。这是一个 Chrome 插件，您需要从 Chrome 应用商店下载。

首先我们为域名配置代理，支持单次添加和批量添加

添加完成后，点击插件图标即可看到刚才配置的信息。勾选Enabled，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 中代理配置的详细规则。这里我就不一一描述了。

总结

下面是重点。我们从适用范围、配置难度、团队协作成本三个方面来比较这三种配置方式版权归作者所有。如需商业转载，请联系求作者授权。非商业转载请来源。