快捷導(dǎo)航

Vue項(xiàng)目中跨域問(wèn)題解決方案

更新時(shí)間：2018年06月05日 09:24:31 作者：常峻

本文給大家介紹了vue項(xiàng)目中跨域問(wèn)題的完美解決方案，通過(guò)更改header，使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧

方法

后臺(tái)更改header
使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）
Jquery jsonp

后臺(tái)更改header

header('Access-Control-Allow-Origin:*');//允許所有來(lái)源訪問(wèn) 
header('Access-Control-Allow-Method:POST,GET');//允許訪問(wèn)的方式

使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）

打開(kāi)config/index.js,在proxyTable中添寫(xiě)如下代碼：

proxyTable: { 
 '/api': { 
  target: '填寫(xiě)請(qǐng)求源地址', //源地址 
  changeOrigin: true, //是否跨域
  pathRewrite: { 
   '^/api': '' //路徑重寫(xiě) 
   } 
 } 
}

使用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請(qǐng)求

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項(xiàng)目中跨域問(wèn)題解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實(shí)現(xiàn)雙向綁定，有興趣的可以了解一下
2017-06-06
jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問(wèn)題(小結(jié))
這篇文章主要介紹了Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問(wèn)題(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
解決vue單頁(yè)面修改樣式無(wú)法覆蓋問(wèn)題
這篇文章主要介紹了vue單頁(yè)面修改樣式無(wú)法覆蓋問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
Vue應(yīng)用中504錯(cuò)誤（Gateway timeout）的原因與解決方法
在Vue前端應(yīng)用中遇到504代理錯(cuò)誤通常是由于請(qǐng)求在到達(dá)服務(wù)器之前超時(shí),504錯(cuò)誤表示網(wǎng)關(guān)超時(shí),可能由后端服務(wù)響應(yīng)慢、網(wǎng)絡(luò)問(wèn)題、代理配置錯(cuò)誤、請(qǐng)求負(fù)載過(guò)大、前端請(qǐng)求超時(shí)設(shè)置不當(dāng)、服務(wù)器資源不足或第三方服務(wù)問(wèn)題引起
2024-09-09
Vue函數(shù)式組件專篇深入分析
Vue提供了一種稱為函數(shù)式組件的組件類型,用來(lái)定義那些沒(méi)有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,它只接受一些props來(lái)顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實(shí)現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
Vue調(diào)試神器vue-devtools安裝方法
本篇文章主要介紹了Vue調(diào)試神器vue-devtools安裝方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
vue原生方法自定義右鍵菜單
這篇文章主要為大家詳細(xì)介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問(wèn)題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01