快捷導(dǎo)航

webpack中的代理配置詳解

更新時(shí)間：2022年06月26日 11:45:27 作者：頑強(qiáng)的小豆子

本文主要介紹了webpack中的代理配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

作用：

1.解決開發(fā)環(huán)境跨域問題（不用再去配置nginx和host）

2.如果你有單獨(dú)的后端開發(fā)服務(wù)器API，并希望在同域名下發(fā)送API請(qǐng)求，那么代理某些URL會(huì)很有用

下面介紹一下五種經(jīng)常使用的場(chǎng)景

使用場(chǎng)景一：

請(qǐng)求到 /api/xxx 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/api/xxx, 例如 /api/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/api/user

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

        } 
    } 
};

使用場(chǎng)景二

多個(gè)前綴的路徑，都用一個(gè)路徑來代理，使用context屬性

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

使用場(chǎng)景三

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

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

請(qǐng)求到 /api/xxx 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/xxx, 例如 /api/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/user

使用場(chǎng)景四：

如果想要支持https，需要配置。默認(rèn)情況下，不接受運(yùn)行在 HTTPS（超文本傳輸安全協(xié)議）上，且使用了無效證書的后端服務(wù)器。

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

使用場(chǎng)景五：

個(gè)人理解：如果想要請(qǐng)求靜態(tài)html頁面，繞過代理；對(duì)于api請(qǐng)求則保持代理

有時(shí)你不想代理所有的請(qǐng)求?？梢曰谝粋€(gè)函數(shù)的返回值繞過代理。

在函數(shù)中你可以訪問請(qǐng)求體、響應(yīng)體和代理選項(xiàng)。必須返回 false 或路徑，來跳過代理請(qǐng)求。

例如：對(duì)于瀏覽器請(qǐng)求，你想要提供一個(gè) HTML 頁面，但是對(duì)于 API 請(qǐng)求則保持代理。你可以這樣做：

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'; 
                    } 
                } 
            } 
        } 
    }    
};

解決跨域原理

上面的參數(shù)列表中有一個(gè)changeOrigin參數(shù), 是一個(gè)布爾值, 設(shè)置為true, 本地就會(huì)虛擬一個(gè)服務(wù)器接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求,

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

vue-cli中proxyTable配置接口地址代理示例

個(gè)人理解：這個(gè)配置文件會(huì)生成一個(gè)代理服務(wù)器，用于連接前端請(qǐng)求，向后端api服務(wù)器發(fā)送請(qǐng)求

修改 config/index.js

module.exports = { 
    dev: { 
    // 靜態(tài)資源文件夾 
    assetsSubDirectory: 'static',
    // 發(fā)布路徑
    assetsPublicPath: '/',
 
    // 代理配置表，在這里可以配置特定的請(qǐng)求代理到對(duì)應(yīng)的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接口，需要配置這個(gè)參數(shù) 
            changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置 
        }, 
        // 例如將'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx' 
        '/img': { 
            target: 'https://cdn.wangyaxing.cn', // 接口的域名
             secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
            changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
             pathRewrite: {'^/img': ''}  // pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'。 
        } 
    }, 
    // Various Dev Server settings 
    //可以在process.env.HOST中重寫 
    host: 'localhost', // can be overwritten by process.env.HOST 
    //可以用process.env.PORT重寫，如果接口被占用，會(huì)分配一個(gè)其他端口 
    port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 
}