Vue3.x + axios 跨域方案踩坑指北

栏目: jQuery · 发布时间: 1年前

来源: juejin.im

内容简介:最近实验课上需要重构以前写过的一个项目(垃圾堆),需要添加发生邮件提醒的功能,记得以前写过一个PHP版的实现,所以想把PHP写的功能整理成一个服务,然后在前端调用。但是这个项目是JavaWeb,也就是说我需要面对跨域的问题。不过本篇文章,讲的并不是如何解决这样的跨域问题,而是我在找如何解决这个问题的路上遇到的坑。其实,在前端工程化大行其道的现在,前后端已经分离开来,前端为了提高工作流效率往往自己开一个小型的服务器,就比如其实这个问题解决起来很简单,网上也是很多教程,为了文章完整性,我这里也做一个尽量完备的展

本文转载自:https://juejin.im/post/5d1cc073f265da1bcb4f486d,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

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

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

开始填坑

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

vue.config.js中devServer.proxy的配置解析

Vue3.x的CLI工具比Vue2.x的CLI工具构建的项目要简化很多,根目录下只有 ./src./public 文件夹,所以网上很多教程说 config 目录下的 vue.config.js 是说的vue2.x版本。那么对于Vue3.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-middlewarenpm描述 里, http-proxy-middleware 是一个npm模块,是proxy的底层原理实现)。

foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment
复制代码

以我上面的配置为例, '/index' 这个 keyhttp-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-middlewarenpm描述的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


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

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

复杂性思考

复杂性思考

Allen B. Downey / 张龙 / 机械工业出版社 / 2013-5 / 49.00元

本书的灵感来源于无聊与迷恋的感觉:对常规的数据结构与算法介绍的无聊,对复杂系统的迷恋。数据结构的问题在于教师在教授这门课程的时候通常不会调动起学生的积极性;复杂性科学的问题在于学校通常不会教授这门课程。 2005年,我在欧林学院讲授了一门新课程,学生要阅读关于复杂性的主题,使用Python进行实验,并学习算法与数据结构。当我在2008年再次讲授这门课程时,我写了本书的初稿。 在2011......一起来看看 《复杂性思考》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码