webpack中的代理設定詳解

2022-06-26 14:00:55

作用：

1.解決開發環境跨域問題（不用再去設定nginx和host）

2.如果你有單獨的後端開發伺服器API，並希望在同域名下傳送API請求，那麼代理某些URL會很有用

下面介紹一下五種經常使用的場景

使用場景一：

請求到 /api/xxx 現在會被代理到請求 http://localhost:3000/api/xxx, 例如 /api/user 現在會被代理到請求 http://localhost:3000/api/user

module.exports = { 
    //... 
    devServer: { 
        proxy: { 
            '/api': 'http://localhost:3000'

        } 
    } 
};

使用場景二

多個字首的路徑，都用一個路徑來代理，使用context屬性

module.exports = { 
    //... 
    devServer: { 
        proxy: [{ 
            context: ['/auth', '/api'], 
            target: 'http://localhost:3000', 
        }] 
    } 
};

使用場景三

將url中的 /api替換為空串：

module.exports = {
     //... 
    devServer: { 
        proxy: { 
            '/api': {
                 target: 'http://localhost:3000',
                pathRewrite: {'^/api' : ''}
            } 
        } 
    } 
};

請求到 /api/xxx 現在會被代理到請求 http://localhost:3000/xxx, 例如 /api/user 現在會被代理到請求 http://localhost:3000/user

使用場景四：

如果想要支援https，需要設定。預設情況下，不接受執行在 HTTPS（超文字傳輸安全協定）上，且使用了無效證書的後端伺服器。

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'https://other-server.example.com',
                 secure: false//是否驗證SSL Certs
            }
        }
    }
};

使用場景五：

個人理解：如果想要請求靜態html頁面，繞過代理；對於api請求則保持代理

有時你不想代理所有的請求。可以基於一個函數的返回值繞過代理。

在函數中你可以存取請求體、響應體和代理選項。必須返回 false 或路徑，來跳過代理請求。

例如：對於瀏覽器請求，你想要提供一個 HTML 頁面，但是對於 API 請求則保持代理。你可以這樣做：

module.exports = { 
  //... 
    devServer: { 
        proxy: {
             '/api': { 
                target: 'http://localhost:3000', 
                bypass: function(req, res, proxyOptions) { 
                    if (req.headers.accept.indexOf('html') !== -1) { 
                        console.log('Skipping proxy for browser request.'); 
                        return '/index.html'; 
                    } 
                } 
            } 
        } 
    }    
};

解決跨域原理

上面的參數列中有一個changeOrigin引數, 是一個布林值, 設定為true, 本地就會虛擬一個伺服器接收你的請求並代你傳送該請求,

module.exports = { 
    //... 
    devServer: { 
        proxy: { 
            '/api': { 
                target: 'http://localhost:3000', 
                changeOrigin: true, 
            } 
        } 
    } 
};

vue-cli中proxyTable設定介面地址代理範例

個人理解：這個組態檔會生成一個代理伺服器，用於連線前端請求，向後端api伺服器傳送請求

修改 config/index.js

module.exports = { 
    dev: { 
    // 靜態資原始檔夾 
    assetsSubDirectory: 'static',
    // 釋出路徑
    assetsPublicPath: '/',
 
    // 代理設定表，在這裡可以設定特定的請求代理到對應的API介面
     // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html 
    proxyTable: {
         // 例如將'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx' 
        '/api': {
            target: 'https://wangyaxing.cn', // 介面的域名 
            secure: false,  // 如果是https介面，需要設定這個引數 
            changeOrigin: true, // 如果介面跨域，需要進行這個引數設定 
        }, 
        // 例如將'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx' 
        '/img': { 
            target: 'https://cdn.wangyaxing.cn', // 介面的域名
             secure: false,  // 如果是https介面，需要設定這個引數
            changeOrigin: true, // 如果介面跨域，需要進行這個引數設定
             pathRewrite: {'^/img': ''}  // pathRewrite 來重寫地址，將字首 '/api' 轉為 '/'。 
        } 
    }, 
    // Various Dev Server settings 
    //可以在process.env.HOST中重寫 
    host: 'localhost', // can be overwritten by process.env.HOST 
    //可以用process.env.PORT重寫，如果介面被佔用，會分配一個其他埠 
    port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 
}