站長資訊網
最全最豐富的資訊網站

vue怎樣解決axios請求出現前端跨域問題(實例詳解)

本篇文章給大家帶來了vue怎樣解決axios請求出現前端跨域問題的相關知識,希望對大家有幫助。

vue怎樣解決axios請求出現前端跨域問題(實例詳解)

在正常開發中跨域問題有很多的解決方案。最常見的就是后端修改響應頭。但是前端也可以解決,通過反向代理。為了防止下一次這樣的錯誤出現,記錄一下,總結一下。

所以現在我們來復盤一下,然后解決掉。

一、為什么會出現跨域的問題?

跨域:瀏覽器從一個域名的網頁去請求另一個域名的資源時,域名、端口、協議任一不同,都是跨域。

在前后端分離的模式下,前后端的域名是不一致的,此時就會發生跨域訪問問題。跨域問題來源于JavaScript的同源策略,即只有 協議+主機名+端口號(如存在)相同,則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源,不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的。而axios是通過Promise實現對ajax技術的一種封裝,也同樣存在跨域問題。

二、解決方案

這里我就使用本機的開啟兩個不同的端口來測試。

未處理跨域前的報錯

vue怎樣解決axios請求出現前端跨域問題(實例詳解)

沒有做跨域處理請求是這樣的

 axios.get('http://localhost:8080/getData')  .then(res => {    console.log(res)  })  .catch(err => {    console.error(err);   })

反向代理

前端進行反向代理來解決跨域問題。原理圖如下:

vue怎樣解決axios請求出現前端跨域問題(實例詳解)

vue項目的端口是8081

vue怎樣解決axios請求出現前端跨域問題(實例詳解)

自己電腦開啟了一個8080的端口,請求/getData就會放回json數據。

配置代理

1.在vue2.0中

修改config文件夾下的index.js文件,在proxyTable中加上如下代碼:

   proxyTable: {       '/apis': {         target: 'http://localhost:8080/',  //要解決跨域的接口的域名         secure:false,           //如果是https接口,需要配置這個參數         changeOrigin: true,  // 如果接口跨域,需要進行這個參數配置         pathRewrite: {           '^/apis': ''  // 路徑重寫         }       },     },

然后在請求中axios中這樣寫

 axios.get('apis/getData')  .then(res => {    console.log(res)  })  .catch(err => {    console.error(err);   })

分析:

target后面的就是需要請求的網址的公共部分,然后用/apis來代理這個,最后重寫一些路徑,請求的時候使用的我們的代理的apis來作為前綴。

這個前綴我們可以自定義,proxyTable是對象,所以我們可以配多個代理。

跨域解決

vue怎樣解決axios請求出現前端跨域問題(實例詳解)

2.在vue3.0中

vue-cli3 腳手架搭建完成后,項目目錄中沒有 vue.config.js 文件,需要手動創建

新建一個vue.config.js,配置以下信息,同樣可以解決。

module.exports = {        devServer: {         proxy: {             '^/api': {                 target: 'http://localhost:8080/',//接口的前綴                 ws:true,//代理websocked                 changeOrigin:true,//虛擬的站點需要更管origin                 pathRewrite:{                     '^/api':''//重寫路徑                 }             }         }     } }

小結:

changeOrigin: true :開啟代理:在本地會創建一個虛假服務器,然后發送請求的數據,并同時接收請求的數據,這樣服務端和服務端就可以進行數據的交互。

apis就是接口實際請求的前綴,去代理了我們的實際的接口前綴的公共部分,也就是協議+主機名+端口號

比如 請求接口為localhost:8080/getData 我們只需要傳入:getData

那么公共的域名就是 localhost:8080/,我們就是在請求接口的公共域名localhost:8080/改為api/即可!

把項目運行起來可以看到接口請求的路徑為 :localhost:8081/apis/getData

而進過代理后,實際的請求路徑是 : localhost:8080/getData

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
91精品一区二区| 日韩人妻无码精品专区| 精品国产高清自在线一区二区三区| 青青草原精品国产亚洲av| 中文无码精品一区二区三区| 一区二区三区久久精品| 亚洲精品日韩专区silk| 国产午夜亚洲精品不卡免下载| 黑巨人与欧美精品一区| 精品香蕉在线观看免费| 久久99国产综合精品免费| 久久亚洲AV无码精品色午夜麻 | 色精品一区二区三区| 国产在线精品美女观看| 成人区人妻精品一区二区三区| 在线视频精品免费| 亚洲午夜国产精品| 久久精品九九亚洲精品| 久久久无码精品亚洲日韩按摩 | 国产精品制服丝袜一区| 揄拍自拍日韩精品| 中文精品久久久久国产网址 | 精品国产免费人成电影在线观看| 99久久精品美女高潮喷水| 久久九九精品国产av片国产| 久久久国产精品福利免费| 国产亚洲精品岁国产微拍精品| 国产在线国偷精品免费看| 中文字幕精品视频在线观看| 国产午夜精品一区二区三区小说 | 人妻少妇精品一区二区三区| 久久亚洲国产精品五月天婷| 久久久精品视频免费观看| 99麻豆久久久国产精品免费| 在线观看亚洲精品国产| 亚洲中文字幕无码久久精品1 | 无码日韩人妻精品久久| 日韩精品人妻av一区二区三区| www国产亚洲精品久久久| 亚洲精品老司机在线观看| 精品人体无码一区二区三区 |