vue-cli開(kāi)發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)
目的：使用vue-cli構(gòu)建的項(xiàng)目，在開(kāi)發(fā)時(shí)，想要訪問(wèn)后臺(tái)接口獲取數(shù)據(jù)，這時(shí)就會(huì)出現(xiàn)跨域問(wèn)題。
在config/index.js中進(jìn)行如下配置
【即在進(jìn)行ajax請(qǐng)求時(shí)，地址中任何以/api開(kāi)頭的請(qǐng)求地址都被解析為目標(biāo)地址，target就是你想要的后臺(tái)接口地址】
proxyTable: {
‘/api': {
target: ‘https://188.188.18.8‘,
changeOrigin: true,
pathRewrite: {
‘^/api': ”
}
}
}
“`
vue-resource調(diào)用示例
this.$http.get('/api/v4/user/login', [options]).then(function(response){
// 響應(yīng)成功回調(diào)
}, function(response){
// 響應(yīng)錯(cuò)誤回調(diào)
});
axios調(diào)用示例
axios({
method: 'get',
headers: {'Accept': '*/*'},
url: '/api/v4/user/login',
data: options
})
.then(function (response) {
console.log(response.data)
})
.catch(function (error) {
console.log(error)
})
講解原理：
在配置中： target: ‘https://188.188.18.8'
在上方vue-resource示例中 第一個(gè)參數(shù)為： /api/v4/user/login
就會(huì)被本地服務(wù)器自動(dòng)解析為 https://188.188.18.8/v4/user/login 而這個(gè)正式我們需要的地址。
跨域原理（本地文件假裝在遠(yuǎn)程服務(wù)器上）：
通過(guò)瀏覽器打開(kāi)頁(yè)面，當(dāng)發(fā)起請(qǐng)求時(shí)：本地服務(wù)器的地址（通常是localhost:8080或者127.0.0.1:8080）會(huì)收到這個(gè)請(qǐng)求，接下來(lái)發(fā)現(xiàn)這個(gè)請(qǐng)求地址中含有字符串 /api，那么本地服務(wù)器會(huì)將請(qǐng)求地址變?yōu)?https://188.188.18.8/v4/ （配置地址） + user/login（調(diào)用方法處的詳細(xì)地址）。
同時(shí)本地服務(wù)器的地址會(huì)由localhost:8080 變?yōu)閔ttps://188.188.18.8/v4/，結(jié)果就是：
我們本地的文件會(huì)被認(rèn)為是放在目標(biāo)地址（https://188.188.18.8/v4/）服務(wù)器上的，當(dāng)前服務(wù)器上的文件請(qǐng)求服務(wù)器其他東西，自然就不是跨域了。
以上這篇vue-cli開(kāi)發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了基于Vue中的父子傳值問(wèn)題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
在我們實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)非常頻繁地和 Vue 組件的生命周期打交道，接下來(lái)我們就從源碼的角度來(lái)看一下這些生命周期的鉤子函數(shù)是如何被執(zhí)行的,需要的朋友可以參考下面文章內(nèi)容2021-09-09
前端處理axios請(qǐng)求下載后端返回的文件流代碼實(shí)例
使用axios可以很方便地獲取后端返回的文件流數(shù)據(jù),并在前端直接在瀏覽器下載,這篇文章主要給大家介紹了關(guān)于前端處理axios請(qǐng)求下載后端返回的文件流的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue實(shí)現(xiàn)簡(jiǎn)易音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易音樂(lè)播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問(wèn)題
這篇文章主要介紹了解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10
本文主要介紹了Vue?h函數(shù)的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
解決vue的變量在settimeout內(nèi)部效果失效的問(wèn)題
今天小編就為大家分享一篇解決vue的變量在settimeout內(nèi)部效果失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程
這篇文章主要介紹了vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決
這篇文章主要介紹了Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01