如何在Nuxt内置服务器中为/.well-known/apple-app-site-association文件指定application/json类型的Content-Type？

当然可以！针对你遇到的这个问题，我整理了Nuxt 3和Nuxt 2两种主流版本的解决方案，你可以根据自己的项目版本选择对应的方法：

Nuxt 3 解决方案 #

方法1：使用Server Middleware #

1. 在项目根目录创建server/middleware/well-known.ts文件，写入以下代码：

import { defineEventHandler, setResponseHeaders } from 'h3'
import { join } from 'pathe'
import { readFileSync } from 'fs'

export default defineEventHandler((event) => {
  // 匹配目标路由
  if (event.path === '/.well-known/apple-app-site-association') {
    // 拼接文件路径
    const filePath = join(process.cwd(), '.well-known', 'apple-app-site-association')
    // 设置正确的Content-Type
    setResponseHeaders(event, {
      'Content-Type': 'application/json'
    })
    // 返回文件内容
    return readFileSync(filePath, 'utf-8')
  }
})

2. 重启Nuxt内置服务器即可生效。这个中间件会自动拦截目标路由的请求，设置响应头并返回文件内容。

方法2：通过Nitro配置静态资源头 #

在nuxt.config.ts中添加Nitro的静态资源配置，直接给指定文件设置响应头：

export default defineNuxtConfig({
  nitro: {
    assets: {
      publicAssets: [
        {
          dir: '.well-known',
          baseURL: '.well-known',
          headers: {
            // 给目标文件单独设置Content-Type
            'apple-app-site-association': {
              'Content-Type': 'application/json'
            }
          }
        }
      ]
    }
  }
})

这种方法不需要额外创建中间件，直接通过配置完成设置，更简洁。

Nuxt 2 解决方案 #

Nuxt 2基于Express服务器，我们可以通过自定义Server Middleware来实现：

1. 在项目根目录创建server-middleware/well-known.js文件，写入以下代码：

const fs = require('fs')
const path = require('path')

module.exports = function(req, res, next) {
  // 匹配目标路由
  if (req.path === '/.well-known/apple-app-site-association') {
    const filePath = path.join(__dirname, '../.well-known/apple-app-site-association')
    // 设置响应头
    res.setHeader('Content-Type', 'application/json')
    // 流式返回文件内容
    fs.createReadStream(filePath).pipe(res)
  } else {
    // 非目标路由，继续执行后续中间件
    next()
  }
}

2. 在nuxt.config.js中注册这个中间件：

export default {
  serverMiddleware: [
    '~/server-middleware/well-known.js'
  ]
}

3. 重启Nuxt内置服务器后，请求目标文件就会返回正确的Content-Type了。

验证方法 #

你可以使用curl命令来验证配置是否生效：

curl -I http://localhost:3000/.well-known/apple-app-site-association

查看返回结果中的Content-Type字段，确认是否为application/json。

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