局域网请求 webpack 反向代理
今天继续在公司思考关于前后端分离的问题,困扰我最大的问题其实就是我用 vue-cli 在本地开发的时候,怎么和后端进行接口的调试,总不可能每次都打包一下放到服务器上看运行正不正常,有没有报错吧?我知道有个反向代理的东西,可是知道它的大致作用,但是我没用过导致我无从下手,但前段时间折腾模拟数据的时候,有用到用json-server
和faker.js
本地开服务器,批量生成模拟数据,然后通过反向代理去请求本地另一个服务器的数据。于是我想,既然这样我可以请求到数据,那么局域网的话我也可以直接通过 ip 直接访问局域网内的服务器,那么我应该也可以通过代理去请求局域网上内其他同事开的本地服务器中的接口,于是就开始折腾了。
由于之前去请求模拟数据的时候,代理配置是写在/config/index.js
中的,于是我依样画葫芦,把之前的配置的地址,路径全改了,但结果却发现请求一只 404 ,这就让我很难受了,于是我去 Google 了一圈,原来这个代理是用的webpack-dev-server
,于是我找到了/build/webpack.dev.conf.js
,按照网上说的,在devServer
中添加了一个proxy
属性
proxy: {
'/Home': {
target: 'http://192.168.1.1/',
secure: false
}
}
这样,我就成功通过代理请求到了同事服务器上的数据。
突然想起来了,利用json-server
和faker.js
模拟数据的过程还没记录,下篇文章记录一下。