webpack+vue-cli创建项目遇见的跨域问题

本文章完全由自己原创，且内容是网上搜索加上自己理解所发布的内容，里面有不对的地方欢迎大家批评指正，谢谢。

目的主要还是希望帮助那些和我一样经常遇见跨域请求抓狂的同行们。

今天在使用webpack+vue+elementUI做后台管理系统时用谷歌浏览器访问时遇见了跨域问题，之前的项目都是全栈大神写的模拟器避开了这个问题，但是模拟器无法复用啊。

今天在新建项目时又碰见这样的问题，让人很无奈，决心自己解决掉这个烦人的跨域问题吧。

百度良久，发现大神们总是提到一个关键字proxyTable，好了，开始发掘

在构建的工程中build文件夹下的webpack.dev.conf.js是重点。

在该文件内 webpack打包配置文件夹下的dev配置中有一行代理设置（下图）。

可以设置代理转发的配置，指向了config文件夹下的index.js内输出的dev配置

设置之后如果请求根目录为"/salesys_wss"的话。指向(target) "http://172.18.48.21:8080"，也就是从事后台开发的同事电脑的地址 。

changeOrigin设置为true以解决跨域问题。

pathRewrite 可以设置如果匹配：前面的链接会自动替换成：后面的地址，因为我不需要替换，所以写成一样了。

这样设置完成之后记得重启webpack开发者模式（npm run dev）,否则修改的代理配置会不生效的。

来看看发送的请求

Request URL显示的地址依然是localhost，但是后台的同事已经收到我的请求，本机也能获取登录后的cookie.后续的请求也是正常的了。

完美，不需要大神写模拟器了。

本文章完全由自己原创，且内容是网上搜索加上自己理解所发布的内容，里面有不对的地方欢迎大家批评指正，但请别人生攻击谢谢。

目的主要还是希望帮助那些和我一样经常遇见跨域请求问题而抓狂的朋友们。