Unity WebGL游戏嵌入Next.js网站无法加载问题求助

问题情况 #

我把Unity导出的WebGL游戏文件放到Next.js项目的public文件夹里，用iframe嵌入网站供用户游玩，网站由Cloudflare托管，但游戏一直加载失败。试过清除缓存、重新构建Unity项目都没用。

后来修复了文件结构，又出现新错误：

Refused to execute script from 'https://www.cardcounter21.com/Game/Build/Game.framework.js.br' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.

解决步骤 #

1. 修正Cloudflare的MIME类型配置 #

Cloudflare默认没正确识别Unity WebGL压缩文件（.br、.gz）的MIME类型，得手动配置：

• 登录Cloudflare控制台，进入你的域名管理页
• 转到规则→转换规则→修改响应头
• 创建新规则，针对对应后缀的文件设置正确的Content-Type：
  • .js.br：设置为application/javascript
  • .wasm.br：设置为application/wasm
  • .data.br：设置为application/octet-stream
• 也可以用页面规则，针对/Game/Build/*.br路径统一配置MIME类型

2. 配置Next.js静态文件响应头（可选但推荐） #

在Next.js项目的next.config.js里添加静态文件头配置，确保Next.js发送正确的MIME类型：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/Game/Build/(.*)',
        headers: [
          {
            key: 'Content-Type',
            value: ({ params }) => {
              const ext = params[0].split('.').pop();
              if (ext === 'js.br') return 'application/javascript';
              if (ext === 'wasm.br') return 'application/wasm';
              if (ext === 'data.br') return 'application/octet-stream';
              return '';
            },
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

3. 检查Unity WebGL构建设置 #

• 确认Unity构建时的压缩格式和输出文件匹配（比如选Brotli就对应.br文件），且所有构建文件完整无缺失
• 检查构建生成的index.html里的资源路径是否正确，因为放在Next.js的public文件夹中，路径要和网站的访问路径对应

4. 验证iframe嵌入路径 #

确保iframe的src路径正确，比如游戏文件在public/Game/index.html，那么iframe代码应该是：

<iframe src="/Game/index.html" width="800" height="600" frameborder="0"></iframe>

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