这篇文章给大家分享的是有关Vue-cli3.x+axios如何实现跨域的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
在通道等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供
网站设计、成都网站建设 网站设计制作按需规划网站,公司网站建设,企业网站建设,
品牌网站制作,
成都全网营销推广,外贸营销网站建设,通道网站建设费用合理。
vue.config.js中devServer.proxy的配置解析
Vue-cli3.x比Vue-cli2.x构建的项目要简化很多，根目录下只有./src和./public文件夹，所以网上很多教程说config目录下的vue.config.js是说的vue-cli 2.x版本。那么对于Vue-cli 3.x版本，构建也很简单，直接在根目录里建一个vue.config.js配置文件就可以了，我们直接看devServer.proxy里的代码:
我这里devServer的地址是：localhost:8080/，需要代理的地址是：localhost/index/phpinfo.php （我自己写的一个测试跨域用的php，返回一个‘ok'）
下面是根据上面的地址需要配置的proxy对象
devServer : {
proxy : {
'/index' : {
target : 'http://localhost/index',
// ws : true,
changeOrigin : true,
pathRewrite : {
'^/index' : ''
}
}
}
}大部分教程到这里就停止了，但是我在这里做一个扩展，为了让读者理解这里的配置是如何起作用的（以下内容整理自http-proxy-middleware的npm描述里，http-proxy-middleware是一个npm模块，是proxy的底层原理实现）。
foo://example.com:8042/over/there?name=ferret#nose
\_/ \______________/\_________/ \_________/ \__/
| | | | |
scheme authority path query fragment
以我上面的配置为例，'/index'这个key在http-proxy-middleware中被称为context——用来决定哪些请求需要被target对应的主机地址（这里是http://localhost/index）代理，它可以是 字符串，含有通配符的字符串，或是一个数组，分别对应于path matching(路径匹配)wildcard path matching(通配符路径匹配)multiple path matching(多路径匹配)，而这里的path指的就是上图所标识的path段。
简言之，这个key就是匹配path的，一旦匹配到符合的path，就会把请求转发的代理主机去，而代理主机的地址就是target字段对应的内容。
那pathRewrit是什么意思呢？意如其名，路径重写。就是把模式（这里是^/index）匹配到的path重写为对应的路径（这里是''，相当于删除了这个匹配到的路径）。除了删除，还有在原有路径上添加一个基础路径，或是改写一个路径的方式，这可以参考http-proxy-middleware的npm描述的option.pathRewrite章节 。
在Vue中使用axios
这个使用任意一个ajax封装的库都是可行的，axios，jquery.ajax或者是vue-resource都是可以的。
在Vue中使用axios，网上有两种方法，一种是将axios加入Vue的原型里，我更推荐第二种方法：
npm install axios vue-axios
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios);
以我上面的proxy配置为基础，想要让代理成功转发到localhost/index/phpinfo.php，在Vue实例中axios需要这样写访问地址：
this.axios.get('/index/phpinfo.php').then((res)=>{
console.log(res);
})我们来分析这些代码整个发挥作用的原理是什么？首先，axios去访问/index/phpinfo.php，这是个相对地址，所以真实访问地址其实是localhost:8080/index/phpinfo.php，然而/index/phpinfo.php被我们配置的/index匹配到了 ，所以访问被proxy代理，那转发到哪个路径呢？在pathRewrite中，我们将模式^/index的路径清除了，所以最终的访问路径是 target+pathRewrite+ 剩余的部分 ， 这样也就是 http://localhost/index++/phpinfo.php
坑点
可能出现即使配置了proxy，但是依然没有任何卵用。
感谢各位的阅读！关于“Vue-cli3.x+axios如何实现跨域”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
新闻名称：Vue-cli3.x+axios如何实现跨域-创新互联
转载源于：
http://cdkjz.cn/article/dhojec.html
