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