node代理请求 vue_基于Vue-CLI 3.0配置webpack的跨域限制代理功能devServer.proxy

接口跨域一直是个头疼的问题，之前的业务页面都基于一套限制比较少的接口在交互，依赖chrome的Host Switch Plus和Allow-Control-Allow-Origin: *就能简单解决本地调试的问题，所以大部分情况下还是写完静态页面然后替换数据部分，直接打包到测试环境即可，所以一直也不觉得麻烦。

不过最近业务变动比较大，一些新的业务接口也开始接了进来，并且新接口对域名白名单也做了很多限制，导致原来的方法以及ip测试服无法使用，所以新问题就来了，我必须找一个能代替测试服的测试方式解决我在开发过程中遇到的调试问题(毕竟我总不能每次改动都打包发布到正式环境吧！)。

第一个想法就是node这么牛逼，应该可以直接做代理吧，所以查了一下，发现是webpack就具备的功能，既然是webpack有的东西，那3.0的脚手架应该也可以轻松配置，于是翻了一下官方文档关于config的那一part，还真的有，嘿嘿！

先附上vue的官方文档  https://cli.vuejs.org/zh/config/#devserver-proxy

当然，所有配置都是基于webpack，更多的要看webpack的官方文档。

webpack的官方文档  https://webpack.docschina.org/configuration/dev-server/

下面是我在工作环境中，采取的几种处理方式的小笔记。

注意事项

1、以下的所有方式，调试的时候都是npm run serve启动本机测试服，打包的时候都是npm run build跟平时一样打包。

2、配置的proxy指向，在项目文件里的请求必须都是相对地址，不能是以http/https开头的绝对地址，只有相对地址才会发起代理请求。

接口和项目处于同域名

这种情况就是我原来接触最多的接口，之前能直接丢到测试服也是因为测试服也有一套跟正式环境一样的测试接口，所以项目里引入接口都是写 / 开头的，从根目录开始的相对地址。

比如：

项目地址是 chengpeiquan.com/web-app/project-name/

接口地址是 chengpeiquan.com/api/index.php?module=newslist

配置方式参考如下：

二、接口和项目不在同域名

这种情况就是我现在新的业务场景。

比如：

项目地址是 chengpeiquan.com/web-app/project-name/

接口地址是 2dang.com/api/index.php?module=newslist

由于接口已经不是项目所在的域名，所以线上是不能用相对地址配置接口url，但是调试的时候又必须是相对地址，所以针对这种情况，封装了一个接口域名函数来判断当前的环境，决定是以绝对地址请求还是相对地址请求。

配置方式参考如下：

上面2个是最简单的例子，主要是记录起来备忘，更多配置可以看webpack的官方文档。