vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决
导读:本文共1988字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 使用axios遇到的相对路径和绝对路径问题部分依赖说明:"vue": "^2.5.2","webpack": "^3.6.0","axios": "^0.19.0",通过设置全局baseURL,在其他组件中使用axios时便可以很方便。有时又可... ...
目录
(为您整理了一些要点),点击可以直达。部分依赖说明:
"vue": "^2.5.2",
"webpack": "^3.6.0",
"axios": "^0.19.0",
通过设置全局baseURL,在其他组件中使用axios时便可以很方便。有时又可以根据需要在具体的请求配置中设置新的baseURL以覆盖全局的baseURL。在这些过程中,可能需要正确的使用相对路径和绝对路径才能达到预期的效果。
首先在main.js中设置axios.defaults.baseURL = '/api';
绝对路径的形式:
1.url设置时,开头使用/,如下方的使用axios发起的post请求:
其完整的Request URL为:http://localhost:8080/api/user/12345
2.url设置时,直接使用http或https开头,如下方使用axios发起的get请求:
其完整的Request URL为:http://192.168.6.66:8080/user/12345
在当前界面下,需要发起请求,而且这个请求的baseURL不再是已经设置好的全局baseURL时,这时需要在请求配置中设置新的baseURL(如res)用来覆盖全局设置的baseURL:api。
最初的印象中,使用axios发起请求时设置的url及完整的Request URL似乎与发起请求的操作所在界面的url路径无关。但实际效果如何呢?这些有和绝对路径和相对路径有什么关系呢?
2.1.当前界面所在URL
当前界面所在的URL为:http://localhost:8080/app/pro
2.2.使用相对路径
以发送post请求为例,请求配置如下:
其完整的Request URL为:http://localhost:8080/app/res/pic/,可以看到并不能达到想要的结果。
2.3.使用绝对路径
还是以发送post请求为例,请求配置如下:
其完整的Request URL为:http://localhost:8080/res/pic/,可以看到此时将baseURL的值由api覆盖为res,达到了预期的效果。
看过axios的官方文档后配置变得简单:
最后一行是将axios配置到Vue原型中,使用方法为:
isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot
read property 'protocol' of undefined
这是因为axios不是VUE插件,不能使用 Vue.use(axios) 方式引用,需要使用上述原型方式引入
vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决的详细内容,希望对您有所帮助,信息来源于网络。