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