Vue3.x+axios跨域方案的踩坑指南_vue3axios,axiosvue3 - CSDN文库

1星 86 浏览量更新于2023-05-11 评论 1 收藏 74KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue 3.x+axios跨域方案的踩坑指南跨域方案的踩坑指南

主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或

者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

缘起缘起

最近实验课上需要重构以前写过的一个项目（垃圾堆），需要添加发生邮件提醒的功能，记得以前写过一个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-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的原型里，我更推荐第二种方法：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论1

Ryan.Fox

2020-12-18

你讲的是vuecli3-axios？底下一个免费的和你一模一样，还是去年发的，你直接CV过来，还要积分，真厉害

weixin_38748721

粉丝: 2
资源: 901

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈