使用axios遇到的相對(duì)路徑和絕對(duì)路徑問(wèn)題

部分依賴(lài)說(shuō)明：

• "vue": "^2.5.2",
• "webpack": "^3.6.0",
• "axios": "^0.19.0",

?通過(guò)設(shè)置全局baseURL，在其他組件中使用axios時(shí)便可以很方便。有時(shí)又可以根據(jù)需要在具體的請(qǐng)求配置中設(shè)置新的baseURL以覆蓋全局的baseURL。在這些過(guò)程中，可能需要正確的使用相對(duì)路徑和絕對(duì)路徑才能達(dá)到預(yù)期的效果。

1.設(shè)置全局baseURL

首先在main.js中設(shè)置axios.defaults.baseURL = '/api';

絕對(duì)路徑的形式：

1.url設(shè)置時(shí)，開(kāi)頭使用/，如下方的使用axios發(fā)起的post請(qǐng)求：

axios({
? //請(qǐng)求方式為post
? method: 'post',
? //絕對(duì)路徑
? url: '/user/12345',
? //data等設(shè)置省略
? ......
});

其完整的Request URL為：http://localhost:8080/api/user/12345

2.url設(shè)置時(shí)，直接使用http或https開(kāi)頭，如下方使用axios發(fā)起的get請(qǐng)求：

axios({
? //請(qǐng)求方式為get
? method:'get',
? //絕對(duì)路徑
? url:'http://192.168.6.66:8080/user/12345',
? //其他設(shè)置省略
? ......
})

其完整的Request URL為：http://192.168.6.66:8080/user/12345

2.覆蓋baseURL

在當(dāng)前界面下，需要發(fā)起請(qǐng)求，而且這個(gè)請(qǐng)求的baseURL不再是已經(jīng)設(shè)置好的全局baseURL時(shí)，這時(shí)需要在請(qǐng)求配置中設(shè)置新的baseURL（如res）用來(lái)覆蓋全局設(shè)置的baseURL:api。

最初的印象中，使用axios發(fā)起請(qǐng)求時(shí)設(shè)置的url及完整的Request URL似乎與發(fā)起請(qǐng)求的操作所在界面的url路徑無(wú)關(guān)。但實(shí)際效果如何呢？這些有和絕對(duì)路徑和相對(duì)路徑有什么關(guān)系呢？

2.1.當(dāng)前界面所在URL

當(dāng)前界面所在的URL為：http://localhost:8080/app/pro

2.2.使用相對(duì)路徑

以發(fā)送post請(qǐng)求為例，請(qǐng)求配置如下：

axios({
? //請(qǐng)求方式為post
? method: 'post',
? //絕對(duì)路徑
? url: '/pic/',
? //`baseURL`將自動(dòng)加在`url`前面，除非`url`是一個(gè)絕對(duì)URL。
? baseURL: 'res',
? //data等設(shè)置省略
? ......
});

其完整的Request URL為：http://localhost:8080/app/res/pic/，可以看到并不能達(dá)到想要的結(jié)果。

2.3.使用絕對(duì)路徑

還是以發(fā)送post請(qǐng)求為例，請(qǐng)求配置如下：

axios({
? //請(qǐng)求方式為post
? method: 'post',
? //絕對(duì)路徑
? url: '/pic/',
? //`baseURL`將自動(dòng)加在`url`前面，除非`url`是一個(gè)絕對(duì)URL。
? baseURL: '/res',
? //data等設(shè)置省略
? ......
});

其完整的Request URL為：http://localhost:8080/res/pic/，可以看到此時(shí)將baseURL的值由api覆蓋為res，達(dá)到了預(yù)期的效果。

參考：https://github.com/axios/axios/blob/master/README.md

axios設(shè)置訪問(wèn)基礎(chǔ)路徑

看過(guò)axios的官方文檔后配置變得簡(jiǎn)單：

在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) {}）

可能會(huì)遇到下面的報(bào)錯(cuò)

isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot

read property 'protocol' of undefined

這是因?yàn)閍xios不是VUE插件，不能使用 Vue.use(axios) 方式引用，需要使用上述原型方式引入 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論