1. 程式人生 > >解決vue開發請求資料跨域的問題(基於瀏覽器的配置解決)

解決vue開發請求資料跨域的問題(基於瀏覽器的配置解決)

    在用vue做前端開發的時候,因為一般跑vue使用的webpack自帶的node服務,而我們實際要使用的資料確是後臺伺服器上的,所以這就涉及到伺服器請求跨域的問題。本來在諸如axios之類的網路請求引數裡面配置

withCredentials: true,

就可以解決跨域問題的,但是現在瀏覽器比如chorme有做了新的跨域限制,比如要伺服器端配置允許跨域才行,詳見跨域問題解決,是英文的,看起來需要花點功夫;那有沒有不需要伺服器端配置就能解決瀏覽器的跨域問題的辦法呢?答案肯定是有的!!

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

版本號49之前的跨域設定

具體做法為:

1.下載並安裝好chorme瀏覽器後在桌面找到瀏覽器快捷圖示並點選滑鼠右鍵的屬性一欄。
2.在屬性頁面中的目標輸入框里加上   --disable-web-security  如下圖所示:

3.點選應用和確定後關閉屬性頁面,並開啟chrome瀏覽器。如果瀏覽器出現提示“你使用的是不受支援的命令標記 --disable-web-security”,那麼說明配置成功。

版本號49之後的chrome跨域設定

chrome的版本升到49之後,跨域設定比以前嚴格了,在開啟命令上加--disable-web-security之後還需要給出新的使用者個人資訊的目錄。眾所周知chrome是需要用gmail地址登入的瀏覽器,登入後就會生成一個儲存個人資訊的目錄,儲存使用者的收藏、歷史記錄等個人資訊。49版本之後,如果設定chrome瀏覽器為支援跨域模式,需要指定出一個個人資訊目錄,而不能使用預設的目錄,估計是chrome瀏覽器怕使用者勿使用跨域模式洩露自己的個人資訊(主要是cookie,很多網站的登入token資訊都是儲存在cookie裡)。

具體做法為:

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

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

3.點選應用和確定後關閉屬性頁面,並開啟chrome瀏覽器。

再次開啟chrome,發現有“--disable-web-security”相關的提示,說明chrome又能正常跨域工作了。

跨域成功後,首頁換成了google的welcome頁面,同時原來收藏的連結和歷史記錄都不見了,而C:\MyChromeDevUserData目錄下則生成了新的個人資訊相關的檔案。

這樣就解決了諸如

報錯的問題,一個坑給填滿了,後面還有很多坑需要去填,哈哈!!!