前端代理----whistle

場景一：如何將本地的請求代理到服務器上（如果接口沒有校驗登陸的情況）

最簡單的方法：在項目文件中找到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

第二步：配置代理服務器

方法一：直接配置系統代理

方法二，瀏覽器代理，安裝chrome插件----Proxy SwitchyOmega(可以進行代理的切換)

安裝完Proxy SwitchyOmega之后，進入頁面，在情景模式下面點擊新建情景模式，然后進行如下配置（標紅部分）

 

 

第三步，配置Whistle

網址中輸入127.0.0.1:8899,進入Whistle頁面

以上就完成了所有的配置，當你訪問http://10.95.109.152:8093的時候，訪問就是本地的127.0.0.1:8081的代碼，接下來就可以愉快的在本地進行調試啦！