Next.js iframe中WebXR无法启动，回退至Scene Viewer问题排查

你的核心问题是：跨域iframe中的WebXR无法在Android Chrome中激活，导致Model Viewer回退到Scene Viewer，而直接访问iframe源站时功能正常。以下是具体排查点和修复方案：

1. 修正父页面的Permissions-Policy配置 #

当前你设置的xr-spatial-tracking=()仅允许当前页面使用XR空间追踪权限，对于跨域iframe，需要明确授权目标源：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/",
        headers: [
          {
            key: "Permissions-Policy",
            value: "xr-spatial-tracking=(self https://polygoningenieur.dev)"
          }
        ]
      }
    ];
  }
};

这里(self https://polygoningenieur.dev)表示允许当前页面和指定的iframe源站使用XR权限，确保跨域场景下权限传递生效。

2. 补充iframe的必要权限 #

WebXR不仅需要xr-spatial-tracking，还依赖摄像头权限来启动AR会话。更新iframe的allow属性，添加摄像头权限：

// index.tsx
<iframe
  src="https://polygoningenieur.dev"
  id="ar-showcase"
  title="AR-App Example"
  width="800"
  height="600"
  allow="xr-spatial-tracking; camera; fullscreen"
  allowFullScreen
></iframe>

完整的权限声明可以避免浏览器因权限缺失而禁用WebXR。

3. 配置iframe源站的Permissions-Policy #

除了父页面，iframe的源站（https://polygoningenieur.dev）也需要在响应头中设置Permissions-Policy，允许自身使用XR权限：

Permissions-Policy: xr-spatial-tracking=*

或者更严格地指定父页面的源（如果需要）：

Permissions-Policy: xr-spatial-tracking=(https://your-nextjs-domain.com)

这一步确保源站本身在iframe环境中被允许启动WebXR会话。

4. 验证WebXR在iframe中的可用性 #

在polygoningenieur.dev的页面中添加调试代码，确认WebXR是否被正确启用：

// 嵌入到源站的脚本中
if (navigator.xr) {
  navigator.xr.isSessionSupported('immersive-ar').then(supported => {
    console.log("WebXR immersive-ar 支持状态:", supported);
  });
} else {
  console.log("WebXR 未在当前环境中启用");
}

如果控制台输出false，说明权限配置仍有问题；如果输出true，则需要检查Model Viewer的AR模式优先级。

5. 确保Model Viewer优先使用WebXR #

检查Model Viewer的ar-modes属性，确保webxr被设置为首选模式：

<model-viewer
  src="your-model.glb"
  ar
  ar-modes="webxr scene-viewer quick-look"
  <!-- 其他属性 -->
></model-viewer>

默认情况下webxr是第一位，但如果有自定义配置，需要确认该顺序未被修改。

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