Vue-cli3.x + axios 跨域方案踩坑指北

devServer : {
    proxy : {
      '/index' : {
        target : 'http://localhost/index',
        // ws : true,
        changeOrigin : true,
        pathRewrite : {
          '^/index' : ''
        }
      }
    }
  }

     foo://example.com:8042/over/there"_blank" href="https://github.com/chimurai/http-proxy-middleware#http-proxy-middleware-options" rel="external nofollow" >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转发了这个请求到一个新的地址。

后续


本篇只解决了开发环境下的跨域问题，实际线上还不能跨域，目前这里有一些方案：

  
Nginx反向代理跨域
  
JSONP
  
CORS

下一次讨论这个跨域问题，尝试解决。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。