CRA React项目中Apple App Site Association无法返回JSON响应问题

核心原因 #

CRA默认根据文件扩展名识别MIME类型，无扩展名的apple-app-site-association文件会被服务器判定为未知类型，触发下载行为；同时未设置Content-Type: application/json响应头，导致AASA验证工具报错。

解决方案 #

1. 开发环境（localhost:3000）处理 #

CRA基于webpack-dev-server运行开发服务，需自定义响应头规则：

• 先安装依赖：

npm install react-app-rewired customize-cra --save-dev

• 在项目根目录创建config-overrides.js文件，写入配置：

const { override, devServer } = require('customize-cra');
const path = require('path');

module.exports = override(
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      
      // 为目标文件设置正确响应头
      config.onBeforeSetupMiddleware = (devServer) => {
        devServer.app.get('/.well-known/apple-app-site-association', (req, res) => {
          res.setHeader('Content-Type', 'application/json');
          res.sendFile(path.resolve(__dirname, 'public/.well-known/apple-app-site-association'));
        });
      };

      return config;
    };
  }
);

• 修改package.json的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

• 确保apple-app-site-association文件放在public/.well-known/目录下（需先创建.well-known文件夹）。

2. 生产环境部署配置 #

根据部署平台添加响应头规则：

Nginx部署

在Nginx配置文件中新增：

location /.well-known/apple-app-site-association {
  default_type application/json;
  root /你的项目build目录路径;
}

Netlify部署

创建netlify.toml文件：

[[headers]]
  for = "/.well-known/apple-app-site-association"
  [headers.values]
    Content-Type = "application/json"

Vercel部署

创建vercel.json文件：

{
  "headers": [
    {
      "source": "/.well-known/apple-app-site-association",
      "headers": [
        {
          "key": "Content-Type",
          "value": "application/json"
        }
      ]
    }
  ]
}

验证方式 #

• 开发环境重启服务后，访问目标地址，检查响应头是否包含Content-Type: application/json，且页面直接显示JSON内容而非下载文件。
• 生产环境部署完成后，用AASA验证工具确认报错消失。

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