使用vuecli + webpack進行專案開發時,遇到了需要跨域訪問的情況,這裡簡單記錄一下前端的跨域配置,如下:
1、配置本地**
修改config
資料夾下的index.js
檔案中的dev
下的proxytable
屬性,如下:
...
dev:}}
, host:
'localhost'
, port:
8080
, autoopenbrowser:
false
,...
}...
使用時,只需在需要跨域的url
前加上/api
的字首,在訪問時proxytable
會自動攔截並進行轉換;如:當我們的api
為/getdatalist
時,我們在用axios
呼叫是需要寫成/api/getdatalist
,那麼在訪問時,我們在network
下看到的訪問位址為:http://localhost:8080/api/getdatalist
,而真實的訪問位址為:http:localhost:8888/getdatalist
;
這是因為我們瀏覽器互動的永遠是我們本地的服務,當我們設定**後,本地伺服器會與另外的伺服器(也就是我們要跨域訪問的伺服器)進行互動,並將獲取到的資料返回給瀏覽器;
注:如果只配置這一步,跨域僅在開發環境中生效,如果 想要在生產環境中配置,需要繼續下面的步驟;2、生產環境下配置
axios
的預設例項有乙個baseurl
的屬性,配置了baseurl之後,你訪問介面時就會自動帶上,所以我們可以根據當前的環境是開發環境還是生產環境來配置不同的baseurl
,方法如下:
可以在config
資料夾下新建乙個api.config.js
檔案,內容如下:
//判斷是否是生產環境
var ispro = process.env.
node_env
==='production'
用於區分是生產環境還是開發環境
//配置不同的baseurl
module.exports =
process.env.node_env
用於區分是生產環境還是開發環境,這個值是webpack設定的
3、設定axios的baseurl
在入口檔案中引入axios
和api.config.js
檔案,如下:
// 入口檔案 main.js
import vue from
'vue'
import axios from
'axios'
import apiconfig from
'../config/api.config.js'
axios.defaults.baseurl=apiconfig.baseurl
...
這樣配置之後,打包部署到伺服器上也不用再手工去除/api
按照上述步驟配置完成後就可以實現在開發環境和生產環境下的跨域訪問了,
vue專案跨域問題
cors 這個方案缺點 是 ie6 7 相容不好 倒是不見得要相容 需要b 在響應中加頭 postmessage 缺點也是 ie6 7 相容不好 倒是不見得要相容 需要修改b 的 iframe window.name 傳值得方式很巧妙,相容性也很好。但是也是需要你能修改b 服務端主動請求b 相容性好...
vue專案的實用配置
在使用vue開發專案的過程中,免不了在除錯的時候會寫許多console,在控制台進行除錯 在開發的時候這種輸出是必須的,但是build後線上執行時這個東西是不能出現的 那麼我如何配置專案,從而讓webpack幫我刪除掉console呢?下面我們給出了vue cli 3.0和vue cli 2.0的配...
vue專案打包後跨域
關於vue的跨域配置,有開發環境的跨域和生產環境的跨域,詳見我的另一篇部落格 對於上篇文章的生產環境的跨域位址配置,是將所有介面的訪問都指向同乙個伺服器,而對於前後端未完全分離的專案,如果有某個介面需要訪問非當前專案的另一台伺服器的話,就需要對這個介面單獨進行處理了,針對這個問題,我重新梳理了一下關...