Vue3.0 axios跨域请求代理服务器配置方式
更新时间：2022年04月18日 11:50:55 作者：tdl081071tdy
这篇文章主要介绍了Vue3.0 axios跨域请求代理服务器配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
axios跨域请求代理服务器配置
首先安装axios
npm install axios
然后在vue.config.js文件下配置如下代码
（若没有vue.config.js文件可以自己创建这个文件）
module.exports = {
devServer: {
open: true,
port: 8001,
proxy: {
'/apis': {
target: 'http://localhost:8080/thinkphp/personal_blog/public/personal.php/personal/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/apis': '' // rewrite path
}
},
}
}
};其中open表示是否运行时就启动app，port表示我们当前vue页面的端口比如下面我的页面端口是8001那么这里就写8001
然后proxy中的代码就是跨域代理服务器的配置代码
其中target就是目标api接口，比如你们接口为 http://localhost:8080/api/login 那么target就可以写http://localhost:8080/api/
然后在项目中实际用我们就可以这么写
axios.post('/apis/login', postData)
.then(response => {
// post 成功，response.data 为返回的数据
console.log(response.data)
})
.catch(error => {
// 请求失败
console.log(error)
})那个apis就是http://localhost:8080/api/ 也就是我们在target中配置的api接口，"/apis/"就是 pathRewrite中配置的
然后就可以请求成功了，我这里的后台是以tp5框架做为后台
这里我使用的是vuecli3.0最新版的脚手架
目录结构如下
其中初始创建时没有vue.config.js的文件，这个为自己手动创建
注意 修改成功后一定要重新启动项目
axios跨域问题解决
1.在vue.config.js文件中做如下配置
target: 配置跨域请求的地址changeOrigin: 是否跨域pathRewrite: 路径重写
2.request.js(拦截器页面)如下配置
**这里的baseURL要修改成与vue.config.js文件中设置代理名称(/api)相同的名字
3.具体请求页面如下配置
(不需要做特殊配置)**
url: 具体请求接口
我是根据自己的项目配置的，大家可以自己对照一下，仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue element封装form表单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
vue使用element写东西让我感觉到了特别的方便,下面这篇文章主要给大家介绍了关于如何利用Vue+Element做个小页面的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
Vue3的Effect是其响应式系统的核心,负责依赖追踪和自动响应,它通过ReactiveEffect类封装副作用逻辑,实现依赖收集和触发更新,本文介绍vue 3 effect作用与原理解析,感兴趣的朋友一起看看吧2025-02-02
本篇文章主要介绍了vue组件之Alert的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
今天小编就为大家分享一篇解决vue A对象赋值给B对象,修改B属性会影响到A的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue最简单的前后端交互示例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
关于Element-ui中el-table出现的表格错位问题解决
使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题,下面这篇文章主要给大家介绍了关于Element-ui中el-table出现的表格错位问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要给大家介绍了关于vue-cli3跨域配置的简单方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli3具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了vue实现瀑布流组件滑动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最新评论