如何在Webpack中正确使用createProxyMiddleware？

你直接将createProxyMiddleware返回的中间件实例赋值给devServer的proxy字段导致报错，原因是webpack-dev-server的proxy配置只接受对象或数组，不支持直接传入中间件函数实例。以下是两种正确的配置方式：

方式一：通过setupMiddlewares添加代理中间件（webpack-dev-server v4+推荐） #

这种方式直接在devServer的setupMiddlewares钩子中手动注册http-proxy-middleware，配置更灵活：

// development config
require('dotenv').config()
const package = require('../../package.json')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
const commonConfig = require('./common')
const agent = require('agentkeepalive')
// 新增导入http-proxy-middleware
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = (webpackConfigEnv, argv) =>
    merge(commonConfig(argv), {
        mode: 'development',
        entry: [
            'react-hot-loader/patch', // activate HMR for React
            'webpack-dev-server/client?http://localhost:3030', 
            'webpack/hot/only-dev-server', 
            './index.tsx', // the entry point of our app
        ],
        devServer: {
            port: 3030,
            hot: true, // enable HMR on the server
            historyApiFallback: true,
            // 移除原proxy配置，改用setupMiddlewares
            setupMiddlewares: (middlewares, devServer) => {
                if (!devServer) {
                    throw new Error('webpack-dev-server is not defined');
                }

                // 注册/api/*路径的代理
                devServer.app.use(
                    '/api/*',
                    createProxyMiddleware({
                        target: 'http://foobar:8080/',
                        secure: false,
                        changeOrigin: true,
                        agent: new agent({
                            maxSockets: 100,
                            keepAlive: true,
                            maxFreeSockets: 10,
                            keepAliveMsecs: 100000,
                            timeout: 6000000,
                            freeSocketTimeout: 90000, // free socket keepalive for 90 seconds
                        }),
                        onProxyRes: (proxyRes) => {
                            const key = 'www-authenticate'
                            proxyRes.headers[key] = proxyRes.headers[key]?.split(',')
                        },
                    })
                );

                return middlewares;
            },
        },
        // ... 其他代码省略
    })

方式二：在proxy配置中使用configure选项 #

如果你想保留原proxy的配置结构，可以通过configure选项自定义代理实例：

// development config
require('dotenv').config()
const package = require('../../package.json')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
const commonConfig = require('./common')
const agent = require('agentkeepalive')
// 新增导入http-proxy-middleware
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = (webpackConfigEnv, argv) =>
    merge(commonConfig(argv), {
        mode: 'development',
        entry: [
            'react-hot-loader/patch', // activate HMR for React
            'webpack-dev-server/client?http://localhost:3030', 
            'webpack/hot/only-dev-server', 
            './index.tsx', // the entry point of our app
        ],
        devServer: {
            port: 3030,
            hot: true, // enable HMR on the server
            historyApiFallback: true, 
            proxy: {
                '/api/*': {
                    target: 'http://foobar:8080/',
                    secure: false,
                    changeOrigin: true,
                    // 通过configure选项注入自定义配置
                    configure: (proxy, options) => {
                        Object.assign(options, {
                            agent: new agent({
                                maxSockets: 100,
                                keepAlive: true,
                                maxFreeSockets: 10,
                                keepAliveMsecs: 100000,
                                timeout: 6000000,
                                freeSocketTimeout: 90000, // free socket keepalive for 90 seconds
                            }),
                            onProxyRes: (proxyRes) => {
                                const key = 'www-authenticate'
                                proxyRes.headers[key] = proxyRes.headers[key]?.split(',')
                            },
                        });
                    },
                },
            },
        },
        // ... 其他代码省略
    })

注意事项 #

• 确保已安装http-proxy-middleware依赖：执行npm install http-proxy-middleware --save-dev
• 两种方式都能解决Windows安全弹窗问题，推荐用方式一，更符合webpack-dev-server v4+的设计规范

内容的提问来源于stack exchange，提问作者Learner