Web端Model Viewer传入AWS S3 URL时AR查看按钮不显示问题

你遇到的问题是由S3资源响应配置不符合Model Viewer的AR模式校验规则导致的，可按以下步骤排查修改：

1. 修正S3对象的Content-Type元数据 #

Model Viewer的AR模式（尤其是安卓端Scene Viewer）对3D资源的MIME类型校验非常严格，预览模式加载宽松不会校验，这是你能正常预览但AR按钮不显示的最常见原因：

• 打开S3控制台找到对应glb文件，进入「元数据」标签页
• 确认Content-Type值为model/gltf-binary，如果是默认的application/octet-stream直接修改即可
• 上传文件时建议主动指定该MIME类型，避免默认配置出错

2. 补充CORS策略的暴露头配置 #

你当前的CORS配置ExposeHeaders为空，Model Viewer需要读取响应头的Content-Type、Content-Length字段判断资源是否符合AR要求，拿不到这些字段就不会触发AR按钮渲染，修改CORS策略如下：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "https://*",
            "http://*"
        ],
        "ExposeHeaders": [
            "Content-Type",
            "Content-Length"
        ],
        "MaxAgeSeconds": 3000
    }
]

建议生产环境把AllowedOrigins的通配符替换为你的Angular应用实际域名，移除不需要的PUT/POST/DELETE方法降低安全风险，MaxAgeSeconds配置可以减少重复预检请求。

3. 修复Angular属性绑定写法 #

你当前的模板里直接用src={{demo_fileURL}}插值绑定URL，当URL携带S3签名参数的特殊字符（如&、=）时可能出现转义异常，改为Angular标准属性绑定写法避免出错：

<model-viewer [src]="demo_fileURL" [alt]="demo_name" ... 其他属性>

4. 排查S3签名URL兼容性问题 #

S3签名URL会携带X-Amz-*开头的查询参数，部分旧版本ARCore的Scene Viewer组件无法正确识别带查询参数的glb资源，可按以下逻辑验证：

• 先把测试glb文件设为公有访问，使用不带任何参数的公有S3 URL赋值给demo_fileURL测试
• 如果此时AR按钮正常显示，说明是签名URL参数的问题，可通过CloudFront做S3前置分发，把签名校验逻辑放在CDN层，用无参数的干净URL访问资源即可

注：如果用私有签名URL，要确保签名的有效时间足够长，避免AR组件加载资源时签名已经过期

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