React项目中如何实现非www到www的服务端重定向？

当然可以实现！既然你明确要求服务端层面的重定向（而非客户端跳转），我们可以直接在webpack-dev-server的配置里添加自定义中间件，实现和Nginx一样的非www到www的跳转逻辑。

下面分两种情况给出配置方案，对应不同版本的webpack-dev-server：

方案1：webpack-dev-server v3及以下版本 #

修改你的webpack.dev.config.js中的devServer配置，添加before钩子注入自定义中间件：

var webpack = require("webpack");
var path = require("path");
var parentDir = path.join(__dirname, "../");
module.exports = {
    entry: [path.join(parentDir, "index.js")],
    module: {
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    output: {
        path: parentDir + "/dist",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true,
        host: "0.0.0.0",
        disableHostCheck: true,
        // 新增重定向中间件
        before: function(app, server) {
            app.use(function(req, res, next) {
                const requestHost = req.headers.host;
                // 替换为你实际的非www域名，本地开发可按需添加localhost判断
                if (requestHost === "example.com") {
                    // 301永久重定向到带www的域名，保留原请求路径
                    res.redirect(301, `http://www.example.com${req.originalUrl}`);
                } else {
                    // 其他情况正常处理请求
                    next();
                }
            });
        }
    }
};

方案2：webpack-dev-server v4及以上版本 #

v4版本弃用了before钩子，改用setupMiddlewares配置中间件：

var webpack = require("webpack");
var path = require("path");
var parentDir = path.join(__dirname, "../");
module.exports = {
    entry: [path.join(parentDir, "index.js")],
    module: {
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    output: {
        path: parentDir + "/dist",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true,
        host: "0.0.0.0",
        disableHostCheck: true,
        // 新增重定向中间件
        setupMiddlewares: (middlewares, devServer) => {
            if (!devServer) {
                throw new Error("webpack-dev-server instance is unavailable");
            }

            devServer.app.use((req, res, next) => {
                const requestHost = req.headers.host;
                if (requestHost === "example.com") {
                    res.redirect(301, `http://www.example.com${req.originalUrl}`);
                } else {
                    next();
                }
            });

            // 返回原中间件数组，确保默认中间件正常工作
            return middlewares;
        }
    }
};

关键说明 #

• 这两种方案都是服务端层面的重定向：请求到达webpack-dev-server时就会被处理，不会发送到客户端再跳转，完全符合你的需求。
• 本地开发时，你可以根据实际情况调整requestHost的判断条件（比如跳过localhost:3000的重定向）。
• 注意：webpack-dev-server仅用于开发环境，生产环境部署React应用时，建议还是用Nginx、Apache或者你部署平台（如Vercel、Netlify）的原生重定向规则来处理，这是更稳定的生产级方案。

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