DDR爱好者之家

Vue-cli3.x + axios 跨域方案踩坑指北
站长资源 2024/11/25 佚名
54 1538
DDR爱好者之家 Design By 杰米

缘起

最近实验课上需要重构以前写过的一个项目（垃圾堆），需要添加发生邮件提醒的功能，记得以前写过一个PHP版的实现，所以想把PHP写的功能整理成一个服务，然后在前端调用。但是这个项目是JavaWeb，也就是说我需要面对跨域的问题。不过本篇文章，讲的并不是如何解决这样的跨域问题，而是我在找如何解决这个问题的路上遇到的坑。

其实，在前端工程化大行其道的现在，前后端已经分离开来，前端为了提高工作流效率往往自己开一个小型的服务器，就比如webpack.devServer。这样在前端调用后端接口的时候必然会面临跨域的问题，如题，Vue-cli 3.x + axios 跨域方案 就是解决这里的跨域问题。这里的跨域是基于webpack的devServer的代理功能（proxy）来实现开发环境中的跨域，也就是说本篇所讨论的并不能解决生产环境下的跨域问题，因为webpack.devServer是DevDependencies，一旦打包上线，这个proxy代理就会失效。但是这并不妨碍我们开发中使用跨域来提高开发效率和体验。

开始填坑

其实这个问题解决起来很简单，网上也是很多教程，为了文章完整性，我这里也做一个尽量完备的展示，介绍如何配置Vue-cli 3.x来实现跨域 。

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"_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转发了这个请求到一个新的地址。
    • 



后续




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


    
  
  1. Nginx反向代理跨域
    2. 
  
  2. JSONP
    3. 
  
  3. CORS
    4. 



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




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米