Vue項目中跨域問題解決方案
更新時間：2018年06月05日 09:24:31 作者：常峻
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧
方法
- 后臺更改header
- 使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）
- Jquery jsonp
后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）
打開config/index.js,在proxyTable中添寫如下代碼：
proxyTable: {
'/api': {
target: '填寫請求源地址', //源地址
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //路徑重寫
}
}
}
使用axios
this.$axios.post("/api/地址",{
發(fā)送的數(shù)據(jù)
}).then(data=>{
console.log(data);
})
axios的配置（main.js）
axios.defaults.headers.post["Content-type"]="application/json"; Vue.prototype.$axios=axios;
使用ES6fetch請求
fetch("/api/test/testToken.php",{
method:"post",
headers:{
"Content-type":"application/json",
},
body:JSON.stringify({發(fā)送數(shù)據(jù)})
}).then(result=>{
return result.json()
}).then(data=>{
console.log(data);
})
使用jquery jsonp
methods: {
getData () {
var self = this
$.ajax({
url: '地址',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}
總結(jié)
以上所述是小編給大家介紹的Vue項目中跨域問題解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06
jdk1.8+vue elementui實現(xiàn)多級菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實現(xiàn)多級菜單功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))
這篇文章主要介紹了Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了vue單頁面修改樣式無法覆蓋問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
Vue應(yīng)用中504錯誤（Gateway timeout）的原因與解決方法
在Vue前端應(yīng)用中遇到504代理錯誤通常是由于請求在到達(dá)服務(wù)器之前超時,504錯誤表示網(wǎng)關(guān)超時,可能由后端服務(wù)響應(yīng)慢、網(wǎng)絡(luò)問題、代理配置錯誤、請求負(fù)載過大、前端請求超時設(shè)置不當(dāng)、服務(wù)器資源不足或第三方服務(wù)問題引起2024-09-09
Vue提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級組件之函數(shù)式組件的使用場景與源碼分析的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue3?element-plus?實現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
本篇文章主要介紹了Vue調(diào)試神器vue-devtools安裝方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue如何解決數(shù)據(jù)加載時,插值表達(dá)式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達(dá)式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01