前言: 我們在平常本地開發(fā)時，可能經(jīng)常需要與后端進(jìn)行聯(lián)調(diào)，或者調(diào)用一些api，但是由于瀏覽器跨域的限制、開發(fā)與生產(chǎn)環(huán)境的差異、http與https等問題經(jīng)常讓聯(lián)調(diào)的過程不夠順暢。所以本文介紹一下webpack的devServer中的proxy配置項(xiàng)。接下來讓我們先看一下這個配置項(xiàng)的基本使用：

基本使用

1. 基本代理配置：如果你有一個在localhost:3000上的后端，你可以通過簡單的配置將/api路由代理到這個后端服務(wù)器。webpack會對所有本地發(fā)出的前綴為/api的請求，轉(zhuǎn)發(fā)到localhost:3000

   proxy: {
     '/api': 'http://localhost:3000',
   }
  // 示例
  // 假設(shè)你本地的前端服務(wù)跑在8080端口
  axios.get('/api/user/info') // 會被轉(zhuǎn)發(fā)到 -> localhost:3000/api/user/info
  axios.get('/user/info') // 不會被轉(zhuǎn)發(fā), localhost:8080/user/info

2. 路徑重寫：如果你不希望在代理請求時傳遞原始路徑（例如/api），可以使用pathRewrite來重寫它。這里的^/api: ''的意思是匹配接口路徑中的/api，并將其替換為空字符串

• 在這個例子中，任何以 /api 開頭的請求路徑在轉(zhuǎn)發(fā)之前都會將 /api 部分替換為空字符串。例如，如果你發(fā)起一個請求到 /api/users，那么實(shí)際發(fā)送到后端服務(wù)器的請求路徑將是 /users。
• ^：匹配字符串的開始部分。
• target 是后端的地址
• 最后的請求路徑會是：http://localhost:3000/users

  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: { '^/api': '' },
    },
  }
  

3. 處理HTTPS和無效證書：默認(rèn)情況下，代理不會接受運(yùn)行在HTTPS上且證書無效的后端服務(wù)器。要允許這樣的配置，可以將secure選項(xiàng)設(shè)置為false。

   proxy: {
     '/api': {
       target: 'https://other-server.example.com',
       secure: false,
     },
   }
   

4. 條件代理：通過一個函數(shù)判斷是否需要代理。例如，對于瀏覽器請求，你可能希望提供一個HTML頁面，而對于API請求，則希望代理它。

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

5. 多路徑代理：如果你想將多個特定路徑代理到同一個目標(biāo)，可以使用具有context屬性的對象數(shù)組。

   proxy: [
     {
       context: ['/auth', '/api'],
       target: 'http://localhost:3000',
     },
   ]
   

6. 改變原始主機(jī)頭：代理默認(rèn)保持原始的主機(jī)頭。如果需要，可以通過設(shè)置changeOrigin為true來改變這個行為。

   proxy: {
     '/api': {
       target: 'http://localhost:3000',
       changeOrigin: true,
     },
   }
   

devServer配置示例

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口文件配置
    entry: './src/index.js',

    // 輸出文件配置
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    // 開發(fā)服務(wù)器配置
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        proxy: {
            // 配置代理規(guī)則 '/api'
            '/api': {
                target: 'http://localhost:3000', // 目標(biāo)服務(wù)器地址
                pathRewrite: { '^/api': '' }, // 路徑重寫，將 '/api' 替換為 ''
                secure: false, // 如果是 https 接口，需要配置為 true
                changeOrigin: true // 需要虛擬托管站點(diǎn)
            },
            // 你可以在這里繼續(xù)添加更多的代理規(guī)則
        }
    },

    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],

    // 模塊配置
    module: {
        rules: [
            // 在這里添加 loader
        ]
    }
};

在這個配置中：

1. entry 和 output 分別配置了入口和輸出文件。

2. devServer 是開發(fā)服務(wù)器的配置：

   • contentBase 指定了靜態(tài)文件的位置。
   • compress 開啟 gzip 壓縮。
   • port 設(shè)置開發(fā)服務(wù)器的端口為 9000。

3. devServer.proxy 是重要的代理配置部分：

   • 針對任何以 /api 開始的請求，代理規(guī)則會將請求轉(zhuǎn)發(fā)到 http://localhost:3000 上。
   • pathRewrite 將路徑中的 /api 替換為空字符串，這意味著例如 /api/user 會被轉(zhuǎn)發(fā)為 http://localhost:3000/user。
   • secure: false 表示接受對 https 的代理，這在目標(biāo)服務(wù)器使用自簽名證書時很有用。
   • changeOrigin: true 用于控制 Host 頭的值。如果為 true，Host 頭會被修改為目標(biāo) URL 的主機(jī)名。

4. plugins 和 module 分別用于配置 Webpack 插件和模塊加載器。文章來源地址http://www.zghlxwxcb.cn/news/detail-746443.html

到了這里，關(guān)于Webpack.devServer 配置項(xiàng)如何使用？附devServer完整示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！