前端本地调试的问题
基于安全考虑,浏览器对于跨域请求做了严格限制,简单来说就是前端访问后台接口时,要求接口对应的api的域名地址和浏览器页面的地址一致才行.
虽然api侧可以通过http请求头部制定特定属性允许跨域访问,但基于业务的必要性和安全考虑,后端接口在上线的时候一般也不会打开允许跨域的功能.这就为前端本地开发环境(一般网页地址为http://localhost:8080),调用开发环境,测试环境,线上环境的api带来障碍.
为了解决在本地调试页面访问服务端api跨域的问题,可以使用devServer的代理功能.
使用devServer的代理功能
当我们运行npm run dev的时候,vue的大包脚本会启动一个本地服务器,此服务器为webpack-dev-server. webpack-dev-server本身不属于vue框架,其是一个标准的http服务器的实现.
vue开发框架进行本地调试的时候,使用的webpack-dev-server来启动一个本地服务.
webpack-dev-server的配置信息,由配置中的devServer这个节点来定.
webpack-dev-server提供了代理的功能.可以将浏览器发过来的请求,赚到特定的服务器上.
本文通过配置devServer来说明如何启动代理以进行联调.
devServer节的配置说明
其中proxy属性的内容，就是代理的配置。
devServer节的代理配置
proxy的内容时候一个以代理地址为key的map, 每个map又对应着若干个属性.主要的属性值有:
关于URL的Path部分：
示例如下：
示例解读:
当服务器(devServer) 收到url路径为/api_1开头的请求时,按后面的属性进行代理.
/api_1的请求,被代理到http://test1.env.com
对于/api_1开始的请求,被代理时去掉/api_1,比如:http://localhost:8080/api_1/xxx => http://test1.env.com/api_1/xxx
当然，path也可以被替换,示例如下：
这个配置节和上面的配置节相比，只是修改了pathRewrite，命中规则后，会将请求到当前devServer的path中的/api_1替换为/test_api,即http://localhost:8080/api_1/xxx => http://test1.env.com/test_api/xxx
多环境配置
上面一节介绍了代理配置的基本方法。在实际工作中，我们可能会面对各种环境，比如开发环境，测试环境，正式环境。下面举例说明一种配置多环境的方法。
示例如下：
如上所示，配置了三个环境，分别是dev,test,pub，其域名也各不一样，通过修改变量env的指向，即可切换到不同的环境进行开发联调。
网友评论