vue-cli開發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)
目的：使用vue-cli構(gòu)建的項(xiàng)目，在開發(fā)時(shí)，想要訪問后臺(tái)接口獲取數(shù)據(jù)，這時(shí)就會(huì)出現(xiàn)跨域問題。
在config/index.js中進(jìn)行如下配置
【即在進(jìn)行ajax請(qǐng)求時(shí)，地址中任何以/api開頭的請(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ù)器上）：
通過瀏覽器打開頁面，當(dāng)發(fā)起請(qǐng)求時(shí)：本地服務(wù)器的地址（通常是localhost:8080或者127.0.0.1:8080）會(huì)收到這個(gè)請(qǐng)求，接下來發(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開發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+ElementUI?實(shí)現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁查詢-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫中數(shù)據(jù)比較多時(shí),就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實(shí)現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實(shí)現(xiàn)過程,希望對(duì)大家學(xué)習(xí)有所幫助2021-12-12
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
vue?LogicFlow自定義邊實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue?LogicFlow自定義邊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue3之元素和組件的動(dòng)畫切換實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Vue3之元素和組件的動(dòng)畫切換實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決
這篇文章主要介紹了基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
VuePress 由兩部分組成：一個(gè)以 Vue 驅(qū)動(dòng)的主題系統(tǒng)的簡(jiǎn)約靜態(tài)網(wǎng)站生成工具，和一個(gè)為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。它是為了支持 Vue 子項(xiàng)目的文檔需求而創(chuàng)建的2019-11-11
淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能
在項(xiàng)目開發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下2024-03-03
通過fastclick源碼分析徹底解決tap“點(diǎn)透”
這篇文章主要介紹了通過fastclick源碼分析徹底解決tap“點(diǎn)透”問題的知識(shí)內(nèi)容，有興趣的朋友學(xué)習(xí)一下吧。2017-12-12
appear 是一個(gè)在元素默認(rèn)被顯示的情況下 調(diào)用進(jìn)入動(dòng)畫效果,使得元素在這種初次渲染情況下 執(zhí)行進(jìn)入動(dòng)畫的屬性,最近在學(xué)習(xí)vue3的動(dòng)畫時(shí)遇到appear無法生效的問題,本文給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-10-10