如何在Webpack5 DevServer代理中传递请求头？含301重定向问题

核心原因 #

Webpack DevServer的代理基于http-proxy-middleware，默认情况下，当后端返回301重定向时，代理在跟随重定向的过程中不会自动转发自定义请求头（比如Authorization），且之前的配置没有正确从原始请求中动态获取并传递所有请求头。

解决方案 #

修改代理配置，开启重定向跟随，并通过onProxyReq回调从原始请求中读取所有头信息，动态设置到代理请求中：

devServer: {
    historyApiFallback: true,
    open: true,
    compress: true,
    hot: true,
    port: 8099,
    allowedHosts: "all",
    headers: {
        'Access-Control-Allow-Origin': '*',
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },
    proxy : [
        {
            context: ['/backend'],
            target: "http://mybackend.com",
            secure: false,
            changeOrigin: true,
            followRedirects: true, // 开启跟随重定向
            onProxyReq: (proxyReq, req) => {
                // 动态传递原始请求的所有头信息
                Object.keys(req.headers).forEach(header => {
                    proxyReq.setHeader(header, req.headers[header]);
                });
                // 如需额外添加固定头，可在此补充
                // proxyReq.setHeader('additional-header', 'value');
            }
        }
    ]
}

关键配置说明 #

• followRedirects: true：强制代理跟随后端的301/302重定向请求，避免直接将重定向响应返回给前端导致头信息丢失。
• onProxyReq回调：通过req参数获取前端原始请求的所有头信息，遍历后设置到代理请求中，实现动态传递所有请求头，替代之前的静态头配置。

额外注意事项 #

• 确认后端服务器允许重定向后的请求携带自定义头，部分后端会对重定向请求的头做限制。
• 若涉及Authorization这类敏感头，需确保后端CORS配置允许该头跨域传递，避免后续请求被拦截。

内容的提问来源于stack exchange，提问作者Дмитрий Саламатов