React项目混淆后接口请求失败是怎么回事？

萌新.奕玮提问于 2026-03-16 23:50:21 阅读 26

安全

我用 webpack + terser 对 React 项目做了 JS 混淆，结果上线后发现调用接口报错了。本地没混淆时一切正常，混淆后某些请求参数好像被改掉了？

比如下面这个组件里的 fetch 请求，混淆后用户名字段传成了 undefined，但代码里明明写了 user.name 啊：

const LoginButton = ({ user }) => {
  const handleClick = () => {
    fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username: user.name })
    });
  };
  return <button onClick={handleClick}>登录</button>;
};

我来解答赞 4 收藏

反馈

1 条解答

Newb.义霞 Lv1

这个问题很典型，terser在混淆minify的时候把你的对象属性名也给改掉了，后端收到的字段名完全对不上。

解决方案很简单，在webpack配置里调整terser的mangle.properties选项，保护你需要的字段名不被混淆：

// webpack.config.js

module.exports = {

  // ...

  optimization: {

    minimizer: [

      new TerserPlugin({

        terserOptions: {

          mangle: {

            properties: {

              regex: /^(username|password|user)$/,  // 保护这些属性名

            },

          },

        },

      }),

    ],

  },

};

如果你用的是旧版terser（webpack4），配置稍微不一样：

new TerserPlugin({

  terserOptions: {

    mangle: {

      properties: {

        regex: /^(username|password|user)$/,

      },

    },

  },

}),

另一种更省心的办法是在代码里用字符串字面量写属性名，terser就不会动它：

body: JSON.stringify({ "username": user.name })

不过如果字段多的话还是建议用第一种方案，统一在webpack里配置。

2026-03-17 10:03