詳解如何解決vue開發(fā)請求數(shù)據(jù)跨域的問題(基于瀏覽器的配置解決)

更新時間：2018年11月12日 11:12:09 作者：show_code

這篇文章主要介紹了詳解如何解決vue開發(fā)請求數(shù)據(jù)跨域的問題(基于瀏覽器的配置解決)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在用vue做前端開發(fā)的時候，因為一般跑vue使用的webpack自帶的node服務，而我們實際要使用的數(shù)據(jù)確是后臺服務器上的，所以這就涉及到服務器請求跨域的問題。本來在諸如axios之類的網(wǎng)絡請求參數(shù)里面配置

withCredentials: true,

就可以解決跨域問題的，但是現(xiàn)在瀏覽器比如chorme有做了新的跨域限制，比如要服務器端配置允許跨域才行，詳見跨域問題解決，是英文的，看起來需要花點功夫；那有沒有不需要服務器端配置就能解決瀏覽器的跨域問題的辦法呢？答案肯定是有的！！

這里就說chorme吧，因為chorme基本都是前端主流瀏覽器了，配置方法如下：

版本號49之前的跨域設置

具體做法為：

1.下載并安裝好chorme瀏覽器后在桌面找到瀏覽器快捷圖標并點擊鼠標右鍵的屬性一欄。

2.在屬性頁面中的目標輸入框里加上 --disable-web-security 如下圖所示：

3.點擊應用和確定后關(guān)閉屬性頁面，并打開chrome瀏覽器。如果瀏覽器出現(xiàn)提示“你使用的是不受支持的命令標記 --disable-web-security”，那么說明配置成功。

版本號49之后的chrome跨域設置

chrome的版本升到49之后，跨域設置比以前嚴格了，在打開命令上加--disable-web-security之后還需要給出新的用戶個人信息的目錄。眾所周知chrome是需要用gmail地址登錄的瀏覽器，登錄后就會生成一個存儲個人信息的目錄，保存用戶的收藏、歷史記錄等個人信息。49版本之后，如果設置chrome瀏覽器為支持跨域模式，需要指定出一個個人信息目錄，而不能使用默認的目錄，估計是chrome瀏覽器怕用戶勿使用跨域模式泄露自己的個人信息（主要是cookie，很多網(wǎng)站的登錄token信息都是保存在cookie里）。

具體做法為：

1.在電腦上新建一個目錄，例如：C:\MyChromeDevUserData

2.在屬性頁面中的目標輸入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData，--user-data-dir的值就是剛才新建的目錄。

3.點擊應用和確定后關(guān)閉屬性頁面，并打開chrome瀏覽器。

再次打開chrome，發(fā)現(xiàn)有“--disable-web-security”相關(guān)的提示，說明chrome又能正常跨域工作了。