1. 程式人生 > >前端代碼中的代理

前端代碼中的代理

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的代碼,接下來就可以愉快的在本地進行調試啦!

前端代碼中的代理