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組件 keep-alive 和 transition 使用詳解
這篇文章主要介紹了vue組件 keep-alive 和 transition 使用詳解,需要的朋友可以參考下2019-10-10
vant移動端顯示table效果,增加復(fù)選框,可以進行多選和全選,加橫向滾動條,可以看全部內(nèi)容,下面通過本文給大家分享vue+vant移動端顯示table表格加橫向滾動條效果,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章給大家分享了vue檢測對象和數(shù)組的變化的相關(guān)知識點與實例代碼，有興趣的朋友參考下。2018-06-06
這篇文章主要介紹了Vue3 Props沒有默認(rèn)值但報錯的解決方案,文中通過代碼示例給大家講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
Vue 最獨特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-10-10
淺談Vue.js中ref ($refs)用法舉例總結(jié)
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了使用vue實現(xiàn)通過變量動態(tài)拼接url，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue獲取頁面元素的相對位置的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
本篇文章主要介紹了vue的一個分頁組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12