這篇文章主要介紹vue怎么實(shí)現(xiàn)跨域，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)左貢,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):13518219792

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': '' //路徑重寫(xiě)
       }
     }
  },

this.axios.post("/api?type=keji&key=yourkey").then(res => {
 console.log("api:"+res);
 this.kjnews = res.data.result.data;
});

注意：路徑重寫(xiě)后面是空的不然請(qǐng)求不成功，最后配置完之后還要npm run dev重啟一下

以上是“vue怎么實(shí)現(xiàn)跨域”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱(chēng)：vue怎么實(shí)現(xiàn)跨域-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/dhhcod.html