vue實現(xiàn)跨域的方法分析
更新時間：2019年05月21日 11:20:28 作者：前端那點事
這篇文章主要介紹了vue實現(xiàn)跨域的方法,結(jié)合實例形式分析了vue.js跨域的原理與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了vue實現(xiàn)跨域的方法。分享給大家供大家參考，具體如下：
在請求的資源上沒有“訪問控制允許源”標(biāo)頭。因此，“http://LoalHoal:8081”是不允許訪問的。
出現(xiàn)這個報錯就說明，瀏覽器限制了跨域，需要設(shè)置跨域
一、后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
二、使用JQuery提供的jsonp需要vue中引入jquery，不是今天講的重點
methods: {
getData () {
var that = this
$.ajax({
url: 'yoururl',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
that.data = res.data;
}
})
}
}
三、使用vue-cli腳手架搭建項目時候的proxyTable解決跨域
在config目錄下的index.js的proxyTable配置：
第一種：
proxyTable: {
'/api': { //使用"/api"來代替"http://v.juhe.cn/toutiao/index"
target: 'http://v.juhe.cn/toutiao/index', //源地址
changeOrigin: true, //改變源
pathRewrite: {
'^/api': '' //路徑重寫
}
}
},
this.axios.post("/api?type=keji&key=yourkey").then(res => {
console.log("api:"+res);
this.kjnews = res.data.result.data;
});
注意：路徑重寫后面是空的不然請求不成功，最后配置完之后還要npm run dev重啟一下
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問題
這篇文章主要介紹了Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue如何循環(huán)提取對象數(shù)組中的值,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了解決運行vue項目內(nèi)存溢出問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇關(guān)于vue中子組件傳遞數(shù)據(jù)給父組件的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
v-model 指令默認(rèn)會在 input 事件中加載輸入框中的數(shù)據(jù)（中文輸入法中輸入拼音的過程除外）。這篇文章通過實例代碼給大家介紹Vue.js中 v-model 指令的修飾，感興趣的朋友跟隨小編一起看看吧2018-12-12
在Vue的mounted中仍然加載渲染不出echarts的方法問題
這篇文章主要介紹了在Vue的mounted中仍然加載渲染不出echarts的方法問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue生命周期四個階段created和mount,本文給大家介紹的非常詳細(xì),補(bǔ)充介紹了什么是實例,什么是實例被掛載到DOM,什么是dom,dao操作又是什么,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了Vue如何基于es6導(dǎo)入外部js文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue+php實現(xiàn)的微博留言功能,結(jié)合完整實例形式分析了vue.js前臺留言及后臺php交互功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06