正向代理隱藏真實客戶端，反向代理隱藏真實服務端
瀏覽器:有一個安全策略. 瀏覽器請求的協議端口域名,三者必須一樣,只要一項不一致,就會跨域
瀏覽器有安全策略,有跨域問題,但是服務器之間沒有跨域問題
跨域有以下幾個辦法:
1.jsonp (只能get請求,js的src屬性)
2.cors(后端)
3.nginx(前端配置)
步驟:
1.瀏覽器去請求代理服務器
2.代理服務器發送請求去找服務器
3.服務器將數據返回給代碼服務器
4.代理服務器將數據交給瀏覽器
代理服務器的開發階段和上線階段
開發階段:配置反向代理服務器解決跨域問題,有webpack環境 (關鍵字:開發階段 反向代理 配置)
上線階段:項目開發完畢后,生成dist文件,沒有了webpack環境,所以需要配置nginx代理或者node服務代理(服務器上,其實前后配置差不多,只是語法不一樣)
如何進行配置
參考文檔 https://cli.vuejs.org/zh/config/#devserver-proxy vue的代理配置
https://webpack.js.org/configuration/dev-server/#devserverproxy (也可以看)
注意點:在vue.config.js文件中配置
第一步: 在vue.config.js的devserver節點中配置
target :代理的目標服務器地址,這個路徑是我代理到服務器,即你要請求的第三方接口
第二步:配置環境變量
這是開發階段:可以配置為本地,也可以將網站的協議和域名放這里
這是上線階段:
認知:這個配置環境環境不需要管理,非打包階段,會自動讀取為開發階段,打包后,自動讀取為上線階段