CloudFront+S3部署apple-app-site-association访问时自动下载如何解决

这个问题的核心原因是文件响应头的Content-Type配置错误，或存在强制下载的Content-Disposition头，按以下层级配置即可解决：

1. S3 端配置 #

• 调整文件元数据：找到S3桶中存储的apple-app-site-association文件，进入元数据编辑页，修改Content-Type字段值为application/json。无后缀文件默认会被S3设置为binary/octet-stream类型，会触发浏览器强制下载。
• 移除强制下载配置：如果元数据中存在Content-Disposition: attachment字段，直接删除即可，也可以主动设置为Content-Disposition: inline，要求浏览器尝试直接解析内容。

2. CloudFront 端配置 #

• 清理旧缓存：S3元数据修改完成后，在CloudFront控制台创建失效规则，匹配路径/.well-known/apple-app-site-association，清除旧的缓存内容，否则修改不会立即生效。
• 检查头传递规则：确认CloudFront绑定的缓存策略、源响应头修改规则没有屏蔽Content-Type头，也没有额外给该路径添加attachment格式的Content-Disposition头。

3. Angular 端额外适配 #

因为你的应用基于Angular开发，还需要做如下适配避免资源被拦截：

• 配置静态资源打包规则：在angular.json的build.options.assets数组中添加.well-known目录的打包规则，确保文件会被正常输出到部署包中，示例配置如下：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "src/.well-known",
    "output": "./.well-known"
  }
]

• 配置路由忽略规则：如果使用无#的HTML5路由模式，需要在Angular路由规则中添加.well-known路径的忽略逻辑，避免路由拦截该静态资源请求，返回错误内容。

配置验证 #

执行如下命令查看响应头判断配置是否生效：
curl -I https://mycustomdomain.com/.well-known/apple-app-site-association
当返回结果中存在Content-Type: application/json，且无Content-Disposition: attachment字段时，配置生效，浏览器访问会直接展示文件内容。 #

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