跨域：出于瀏覽器的同源策略限制，當一個請求url的協(xié)議、域名、端口三者之間任意一個與當前頁面url不同即為跨域。

process：process 對象是一個全局變量，它提供有關(guān)當前 Node.js 進程的信息并對其進行控制。簡單說它就是在nodejs中的一個全局變量。

pathRewrite 是使用proxy進行代理時，對請求路徑進行重定向以匹配到正確的請求地址。

vue cli3.0以上和cli2.0變化較大，簡化了很多東西，減少了很多配置文件。
在vue cli3.0版本以上進行跨域設置時需要我們自己在項目的根目錄中創(chuàng)建一個vue.config.js文件

內(nèi)部設置如下，我們要進行設置的就是devServer下的 proxy

① api格式不統(tǒng)一時使用如下方法

api如下格式 ↓ ↓ ↓ // bxx/xxx/xxx api開頭不是統(tǒng)一格式 // axx/xxx/xxx api開頭不是統(tǒng)一格式 // cxx/xxx/xxx api開頭不是統(tǒng)一格式 **// 當我們的api不是統(tǒng)一格式的時候使用該方法.**module.exports = { // 公共路徑(必須有的) publicPath: "./", // 輸出文件目錄 outputDir: "dist", // 靜態(tài)資源存放的文件夾 assetsDir: "static", // eslint-loader 是否在保存的時候檢查 lintOnSave: false, runtimeCompiler: false, productionSourceMap: true, // 不需要生產(chǎn)環(huán)境的設置false可以減小dist文件大小，加速構(gòu)建 devServer: { hot: true, open: true, // 執(zhí)行項目啟動命令后，自動打開項目首頁面 host: '0.0.0.0', // 匹配本機IP地址(默認是0.0.0.0) port: 8080, // 開發(fā)服務器運行端口號 proxy: { '/api': { //將www.qianbuduo.vip印射為/api target: 'http://www.qianbuduo.vip', // 我們要請求的接口域名 // target: process.env.VUE_APP_URL, changeOrigin: true, //是否跨域 ws: true, pathRewrite: { '^/api': '' , // ^/api是一個標示，就是用來告訴node這個連接要用代理。 // '/api': 就是告訴node, 我接口只要是'/api'開頭的才用代理. // 所以我們的接口要這么寫 /api/xxx/xxx. 這樣最后代理的路徑就是http://www.qianbuduo.vip/api/xx/xx. // 但是我們正確的接口路徑里面沒有/api. 這時候就需要用到 pathRewrite, // 用''^/api'':'', 把'/api'去掉, 這樣既能有正確標識, 又能在請求接口的時候去掉多余的api. 這樣最后代理的路徑就是http://www.qianbuduo.vip/xx/xx. } } }, },}

配置完成后需要重新編譯一遍 , 調(diào)用接口的時候

let param = {};this.$axios.get( 'api' + 'xxx/xxx/xxx', param) .then((res) => { }) .catch((err) => { return err; });

?② api格式統(tǒng)一時使用如下方法

( 這樣調(diào)用接口的時候就不需要再添加api了，直接調(diào)用接口就可以例如：this.$axios.get('xxx/xxx/xxx'))

api如下格式 ↓ ↓ ↓ // api/xxx/xxx api開頭是統(tǒng)一格式 // api/xxx/xxx api開頭是統(tǒng)一格式 // api/xxx/xxx api開頭是統(tǒng)一格式**// 當我們的api是統(tǒng)一格式的時候使用如下方法.**module.exports = { // 公共路徑(必須有的) publicPath: "./", // 輸出文件目錄 outputDir: "dist", // 靜態(tài)資源存放的文件夾 assetsDir: "static", // eslint-loader 是否在保存的時候檢查 lintOnSave: false, runtimeCompiler: false, productionSourceMap: true, // 不需要生產(chǎn)環(huán)境的設置false可以減小dist文件大小，加速構(gòu)建 devServer: { hot: true, open: true, // 執(zhí)行項目啟動命令后，自動打開項目首頁面 host: '0.0.0.0', // 匹配本機IP地址(默認是0.0.0.0) port: 8080, // 開發(fā)服務器運行端口號 proxy: { '/api': { //將www.qianbuduo.vip印射為/api target: 'http://www.qianbuduo.vip', // 我們要請求的接口域名 // target: process.env.VUE_APP_URL, changeOrigin: true, //是否跨域 ws: true, } } }, },}

這樣我們的跨域就設置好了~~~

????但是實際開發(fā)中需要經(jīng)常切換地址很麻煩，所以我們可以把 proxy 里的 target 設置為活動的值process.env.VUE_APP_URL；

??? process在文中開頭已經(jīng)介紹過了，是node的一個全局變量；

????它里面的參數(shù)設置可以如下方法 ↓ ↓ ↓

????首先我們可以在項目根目錄創(chuàng)建4個文件?? .env文件 .env.development文件 .env.production文件 .env.testing 文件(效果如下圖)

.env 全局默認配置文件，不論什么環(huán)境都會加載合并

// .env文件VUE_APP_URL = '全局URL'VUE_APP_

.env.development 開發(fā)環(huán)境下的配置文件

// .env.development 文件VUE_APP_URL= "http://192.168.2.137" // 開發(fā)環(huán)境URlVUE_APP_HUANJING= "本地開發(fā)環(huán)境"NODE_ENV: '"development"',

.env.production 生產(chǎn)環(huán)境下的配置文件

// .env.production 文件VUE_APP_URL= "http://www.qianbuduo.vip" // 生產(chǎn)環(huán)境URlVUE_APP_HUANJING= "正式生產(chǎn)環(huán)境"NODE_ENV: '"production"',

.env.testing測試環(huán)境下的配置文件

// .env.testing文件VUE_APP_URL= "http://192.168.xxx.xxx" // 測試環(huán)境URlVUE_APP_HUANJING= "測試環(huán)境"VUE_APP_??? .env 是全局默認配置文件任何環(huán)境下打印process.env都能打印。

????當.env文件內(nèi)的屬性名稱和當前環(huán)境下配置文件的屬性相同時，當前和環(huán)境下的屬性值會覆蓋全局屬性值。
????例如，當我們在本地開發(fā)環(huán)境下打印 process.env時，會打印出所有.env的屬性，VUE_APP_URL這個屬性在全局和本地開發(fā)環(huán)境都有，所以打印出來的值會是本地開發(fā)環(huán)境里面設置的VUE_APP_URL。

關(guān)于文件具體內(nèi)容要求：

注意：

????①?屬性名必須以VUE_APP_開頭，比如VUE_APP_XXX，否則不會生效。
????②?每次修改參數(shù)后都要重新啟動項目，否則不會生效。

????這樣只要我們設置好各環(huán)境下的 VUE_APP_URL 的值，就可以在 vue.config.js 中的 proxy 里直接設置target: process.env.VUE_APP_URL；就可以自動獲取當前環(huán)境下的 url 值了。

看完感覺還行請記得點個贊，您的支持是我創(chuàng)作的動力。謝謝！

總結(jié)

以上是生活随笔為你收集整理的yii2 跨域请求配置_伸手党系列四：vuecli3.0以上 使用 proxy 进行跨域设置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。