vue项目中使用axios遇到的相对路径和绝对路径问题
作者:勿語念千 时间:2024-05-13 09:37:40
使用axios遇到的相对路径和绝对路径问题
部分依赖说明:
"
vue
": "^2.5.2","
webpack
": "^3.6.0","
axios
": "^0.19.0",
?通过设置全局baseURL,在其他组件中使用axios时便可以很方便。有时又可以根据需要在具体的请求配置中设置新的baseURL以覆盖全局的baseURL。在这些过程中,可能需要正确的使用相对路径和绝对路径才能达到预期的效果。
1.设置全局baseURL
首先在main.js中设置axios.defaults.baseURL = '/api';
绝对路径的形式:
1.url设置时,开头使用/,如下方的使用axios发起的post请求:
axios({
? //请求方式为post
? method: 'post',
? //绝对路径
? url: '/user/12345',
? //data等设置省略
? ......
});
其完整的Request URL为:http://localhost:8080/api/user/12345
2.url设置时,直接使用http或https开头,如下方使用axios发起的get请求:
axios({
? //请求方式为get
? method:'get',
? //绝对路径
? url:'http://192.168.6.66:8080/user/12345',
? //其他设置省略
? ......
})
其完整的Request URL为:http://192.168.6.66:8080/user/12345
2.覆盖baseURL
在当前界面下,需要发起请求,而且这个请求的baseURL不再是已经设置好的全局baseURL时,这时需要在请求配置中设置新的baseURL(如res)用来覆盖全局设置的baseURL:api。
最初的印象中,使用axios发起请求时设置的url及完整的Request URL似乎与发起请求的操作所在界面的url路径无关。但实际效果如何呢?这些有和绝对路径和相对路径有什么关系呢?
2.1.当前界面所在URL
当前界面所在的URL为:http://localhost:8080/app/pro
2.2.使用相对路径
以发送post请求为例,请求配置如下:
axios({
? //请求方式为post
? method: 'post',
? //绝对路径
? url: '/pic/',
? //`baseURL`将自动加在`url`前面,除非`url`是一个绝对URL。
? baseURL: 'res',
? //data等设置省略
? ......
});
其完整的Request URL为:http://localhost:8080/app/res/pic/,可以看到并不能达到想要的结果。
2.3.使用绝对路径
还是以发送post请求为例,请求配置如下:
axios({
? //请求方式为post
? method: 'post',
? //绝对路径
? url: '/pic/',
? //`baseURL`将自动加在`url`前面,除非`url`是一个绝对URL。
? baseURL: '/res',
? //data等设置省略
? ......
});
其完整的Request URL为:http://localhost:8080/res/pic/,可以看到此时将baseURL的值由api覆盖为res,达到了预期的效果。
参考:https://github.com/axios/axios/blob/master/README.md
axios设置访问基础路径
看过axios的官方文档后配置变得简单:
在main.js 做如下配置
import axios from 'axios'
axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web'
Vue.prototype.axios = axios
最后一行是将axios配置到Vue原型中,使用方法为:
this.axios.get('/test/1').then(function (response) {})
可能会遇到下面的报错
isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot
read property 'protocol' of undefined
这是因为axios不是VUE插件,不能使用 Vue.use(axios) 方式引用,需要使用上述原型方式引入
以上为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。
来源:https://blog.csdn.net/ZGEwen/article/details/102785721
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python技巧之四种多线程应用分享
修改fckeditor的文件上传功能步骤
![](https://img.aspxhome.com/file/2023/5/94665_0s.jpg)
pyinstaller通过spec文件打包py程序的步骤
mysql 8.0.22 安装配置方法图文教程
![](https://img.aspxhome.com/file/2023/0/69840_0s.png)
MySQL数据库改名的详细方法教程
python获取全国城市pm2.5、臭氧等空气质量过程解析
Python中的startswith和endswith函数使用实例
Python requests发送post请求的一些疑点
![](https://img.aspxhome.com/file/2023/9/77609_0s.png)
vue如何在for循环中设置ref并获取$refs
![](https://img.aspxhome.com/file/2023/0/139880_0s.jpg)
详解Spring Boot中使用Flyway来管理数据库版本
pandas pd.cut()与pd.qcut()的具体实现
![](https://img.aspxhome.com/file/2023/4/118594_0s.png)
python数据可视化Pyecharts库sankey修改桑葚图颜色
![](https://img.aspxhome.com/file/2023/5/76765_0s.jpg)
Python CNN卷积神经网络实战教程深入讲解
![](https://img.aspxhome.com/file/2023/4/99164_0s.png)
python绘制BA无标度网络示例代码
![](https://img.aspxhome.com/file/2023/7/70817_0s.jpg)
asp如何对欲删除的记录确认后再删除?
python list多级排序知识点总结
pytorch 膨胀算法实现大眼效果
![](https://img.aspxhome.com/file/2023/4/131634_0s.png)
MySQL中无过滤条件的count详解
mysql5.7.19 安装配置方法图文教程(win10)
![](https://img.aspxhome.com/file/2023/8/79018_0s.png)