Next.js 13.4.1运行时webpack.hot-update.json报404错误求助

问题根源 #

你的问题来自两个核心问题：

1. CSP 配置拦截热更新请求：Fast Refresh 需要向 /_next/static/webpack/ 路径发起请求获取热更新资源，但当前 connect-src 规则仅允许 self 和 https://storage.googleapis.com，导致浏览器拦截请求返回404，进而触发全量重载。
2. 配置文件语法错误：next.config.js 中定义 csp 变量后多了一行多余的 `;，会导致配置加载异常。

修复步骤 #

1. 修复语法错误 #

删除 csp 变量定义后的多余 `;，原错误代码片段：

const csp = `
  default-src 'self';
  script-src 'self' ${isUnsafeEval} https://apis.google.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' https://lh3.googleusercontent.com;
  media-src 'self' ;
  connect-src 'self' https://storage.googleapis.com;
`;
`; // 这一行是多余的，直接删除

2. 更新 CSP 的 connect-src 规则 #

在开发环境下，为 connect-src 添加本地开发服务器地址，允许热更新请求（包括WebSocket协议，因为Next.js热更新可能用到）。修改后的完整配置如下：

const isUnsafeEval = process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`;
const isStrictMode = process.env.NODE_ENV === 'production' ? true : false;

// 区分开发/生产环境的CSP规则
const csp = process.env.NODE_ENV === 'production' ? `
  default-src 'self';
  script-src 'self' https://apis.google.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' https://lh3.googleusercontent.com;
  media-src 'self';
  connect-src 'self' https://storage.googleapis.com;
` : `
  default-src 'self';
  script-src 'self' ${isUnsafeEval} https://apis.google.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' https://lh3.googleusercontent.com;
  media-src 'self';
  connect-src 'self' http://localhost:3002 ws://localhost:3002 https://storage.googleapis.com;
`;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: isStrictMode,

  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: csp.replace(/\n/g, ''),
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
          {
            key: 'Server',
            value: 'hello',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

3. 验证修复 #

1. 删除 .next 文件夹
2. 重新执行 npm run dev
3. 修改任意组件文件，观察终端是否仍出现全量重载提示，同时检查浏览器控制台是否还有404错误

额外说明 #

• 开发环境添加 ws://localhost:3002 是因为Next.js热更新可能通过WebSocket传输更新信息
• 生产环境保持原有严格CSP规则，避免安全风险

内容的提问来源于stack exchange，提问作者Мария