前端代碼中的代理
阿新 • • 發佈:2018-12-26
headers 127.0.0.1 nod tor sta png pro origin 訪問
場景一:如何將本地的請求代理到服務器上(如果接口沒有校驗登陸的情況)
最簡單的方法:在項目文件中找到webpack開發環境的配置文件,配置devServer對象
devServer: { contentBase: ‘./dist‘, port: 8081, hot: true, open: true, historyApiFallback: true, host: ‘127.0.0.1‘, disableHostCheck: true, headers: { ‘Access-Control-Allow-Origin‘: ‘*‘ }, proxy: { ‘/api/*‘: { target: ‘http://10.52.183.114:8000/fdi-fe‘, changeOrigin: true, secure: false } } }
(註:主要配置target後面的路徑,上面例子的/api下面的文件路徑都代理到target地址,具體的其他配置以實際項目的需求為主)
場景二: 如何將服務器上的代碼代理到本地環境(便於本地調試)(運用工具Whistle)
第一步: 安裝並啟動Whistle(確保已經安裝了node, 如果沒有的話,得先安裝node)
安裝-----------npm install -g whistle
啟動-----------w2 start
訪問whistle------127.0.0.1:8899
第二步:配置代理
推薦一個代理管理工具-----谷歌插件----Proxy SwitchyOmega(可以進行代理的切換)
安裝完Proxy SwitchyOmega之後,進入頁面,在情景模式下面點擊新建情景模式,然後進行如下配置(標紅部分)
第三步,配置Whistle
網址中輸入127.0.0.1:8899,進入Whistle頁面
以上就完成了所有的配置,當你訪問http://10.95.109.152:8093的時候,訪問就是本地的127.0.0.1:8081的代碼,接下來就可以愉快的在本地進行調試啦!
前端代碼中的代理