Nuxt.js框架的Vue项目中apple-app-site-association文件访问异常怎么办

文件被直接下载是因为服务端返回的Content-Type响应头不符合要求，苹果要求apple-app-site-association文件的响应头为application/json，而默认无后缀的静态文件会被识别为application/octet-stream触发下载行为。

分两种场景处理：

场景1：Nuxt2 项目 #

• 在项目根目录的nuxt.config.js中添加服务器中间件配置，自定义该路径的响应头：

// nuxt.config.js
export default {
  serverMiddleware: [
    (req, res, next) => {
      if (req.url === '/apple-app-site-association') {
        res.setHeader('Content-Type', 'application/json')
      }
      next()
    }
  ]
}

• 如果你是用Nginx等反向代理部署，也可以直接在Nginx配置中添加规则：

location /apple-app-site-association {
  alias /path/to/your/static/apple-app-site-association;
  default_type application/json;
}

场景2：Nuxt3 项目 #

• 在server/middleware目录下新建apple-app-site-association.ts文件：

// server/middleware/apple-app-site-association.ts
export default defineEventHandler((event) => {
  if (getRequestURL(event).pathname === '/apple-app-site-association') {
    setHeader(event, 'Content-Type', 'application/json')
  }
})

• 静态部署的情况下也可以在部署平台的响应头配置规则中，指定该路径的Content-Type为application/json。

配置完成后重启服务，访问路径时查看浏览器开发者工具的网络面板，确认响应头的Content-Type字段值为application/json即可。

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