Ⅰ 在vue項目中配置proxy解決跨域問題
1.問題：
後端給的介面是：https://stg-pteppp.leanapp.cn/h5/jsconfig.前端在本地開發中調用該介面跨域。
2.解決方案：
* 在webpack中配置proxy。如下圖所示
如上：
1. target是你要代理的域名，必須要加上http。
2. 這里用'/api'代替target裡面的地址，組件中調用介面時直接用'/api'代替。比如我要調用'https://xxx.com/news.直接寫'/api/news'即可
3. changeOrigin必須為true
* 在頁面中請求寫法如下：
開心吧。數據終於拿到啦！！！
我們知道，vue2.0項目中的static文件夾存儲的是靜態資源，可以直接被訪問到的，如果我們將mock的數據放入static文件夾，在瀏覽器中直接訪問http://localhost:8080/static/json/list.json發現是可以訪問到數據的。於是我們在頁面將mock數據的請求寫成下面這樣：
則需要在webpack中做如下配置：
注意這里的http一定不能省略，否則數據請求不到。這樣做的好處是在本地開發時mock的介面和線上的介面一致，避免上線前大量改動介面名稱。
Ⅱ vue在瀏覽器刷新後顯示代理錯誤
vue在瀏覽器刷新後顯示代理錯雹叢誤的原因是前端項目路由配置的時候路由的用了叢肆兄history模滲襲式。根據查詢相關公開信息，路由的模式改了，之後重新打包發到伺服器。
Ⅲ vue前端工程代理之後怎麼查看請求介面的真實url呢
項目啟動以後按F12 點選Network然後點擊 XHR 就是所有的後端介面地址，然後點擊一個訪問的地址，右邊出現headers裡面的 Request URL 後面的就是真實的url地址了
Ⅳ vue-配置代理解決跨域
我們需要向一台伺服器上上傳圖片，介面是 " http://xxxx.xxx.xx/file/upload_img ",直接向這台伺服器請求上傳圖片將會產生跨域問題，我們這里有兩種解決方式
1.讓後台幫忙配置,一下是node實橘罩現
2.前端配置代理（在前端請鄭伍激求node伺服器，node伺服器再幫我們發送真正的請喊襪求）
Ⅳ vue 前端設置跨域多代理
在項目開發的時候經常會遇到後端提供的多個服務請求地址域名或埠號不一致的情況這時候就需要前端設置多個proxy跨域代理，本文以vue-element-admin為例展示步驟如下：
1: 配置環境變數 .env.development
2: 配置項目根目錄下的vue.config.js 找到devServer
PS：注意VUE_APP_BASE_API 放在數組的最後一個，如果你VUE_APP_BASE_API跟我一樣設置為'' 的話，這樣才不會被代理的虛擬path覆蓋！
3: 找到項目中管理請求地址的文件 src/api/proxy.js （proxy.js 是我隨便起的名字😄）
打開proxy.js
proxy_api 就是你之前在步驟1：中定義的虛擬path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一個路徑處理函數，參數是'/xx/xxx/fetch/list'，return (proxy_api + path)
需要額外注意的是我在配置環境變數 .env.development的時候基礎api設置的是空：
所以不需要在src/utils/request.js 中對代理的請求進行攔截
如果你為VUE_APP_BASE_API設置了虛擬path路徑，那麼就需要在src/utils/request.js為這個虛擬路徑配置攔截，比較麻煩比不建議這么做。
至此跨域多代理已經設置完了，本文中設置兩個代理一個基礎代理VUE_APP_BASE_API，一個額外代理VUE_APP_BASE_API_PROXY，默認情況下走基礎代理，當請求匹配到匹'/proxy-api' 時走額外代理～