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