Vue後臺進行交互跨域問題

在實際項目開發中,經常會碰到需要判斷環境變量的情景。

  vue-cli  的環境下,已經默認配置了一個NODE_ENV的環境變量。當 npm run dev 時,環境變量是development ;當 npm run build 時,環境變量是production。

用過vue-cli開發的通常對NODE_ENV都不陌生,比如我們配置ajax請求的域名頭時,就是通過判斷 process.env.NODE_ENV來實現的。

上面的process.env.NODE_ENV是vue-cli默認配置的,但是在實際項目開發中,只有開發環境和生產環境是還不夠。比如我們還想來一個測試壞境,這時候就需要自己定義了

vue-cli baseURL配置

.env.development配置文件

VUE_APP_BASEURL提取了所有請求url的公共部分,這樣在發送axios請求時就不需要寫完整的請求路徑,只需要寫調用後端的接口名就行了,

要想讓vue知道這個baseURL,需要進行配置,將配置的baseURL交給vue

向後臺發送請求

要想和後臺進行數據交互,發送請求時就要解決跨域問題,即要保證瀏覽器地址欄和發送請求的url一致

瀏覽器地址欄:

請求url: 

若IP地址和端口號不同,就會發生跨域問題,無法請求到後臺。

跨域錯誤:

配置代理

vue.config,js中可以對前端項目的端口進行配置,並且可以將請求轉發到真正要請求的地方去

綜上所述:就是要保證瀏覽器的地址和你發送請求的地址(VUE_BASE_URL)相同,不存在跨域問題,然後再用代理把請求轉發到真正要請求的地方去
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章