Vue-cli3.x+axios如何实现跨域-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Vue-cli3.x+axios如何实现跨域-创新互联

这篇文章给大家分享的是有关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,但是依然没有任何卵用。

  • 大部分情况是因为你的proxy配置和你的访问路径不匹配,或者即使匹配到了,但是转发出去的地址不对,没有命中后端给的API

  • 或者看看axios,有没有使用正确姿势?

  • 还有一点,或许你看到返回的response里的url依然显示的是本地主机,但是数据已经正常返回,这是正常的,因为我们访问的本来就是本地主机,只不过proxy转发了这个请求到一个新的地址。

感谢各位的阅读!关于“Vue-cli3.x+axios如何实现跨域”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前名称:Vue-cli3.x+axios如何实现跨域-创新互联
文章网址:http://kswsj.cn/article/dhojec.html

其他资讯