如何在使用react-router-dom的React应用中添加Apple App Associations配置

解决方案 #

首先要明确：/apple-app-site-association 是苹果爬虫直接向站点服务端发起请求获取的配置文件，走客户端React路由的方案不是最优选择，优先推荐服务端/静态资源托管层配置：

方案1：静态资源/服务端配置（推荐） #

• 把你写好的AASA JSON内容保存为无后缀名的文件，命名为apple-app-site-association，放到站点静态资源根目录（和React打包后的index.html同级）
• 配置服务器返回该文件的响应头Content-Type: application/json，避免被识别为普通文本。以Nginx为例，添加如下配置即可：

  location /apple-app-site-association {
      default_type application/json;
  }
  

如果你用的是Vercel、Netlify等托管平台，直接在平台的自定义响应头配置项里给该路径指定Content-Type即可。

方案2：react-router 客户端实现（不推荐，仅做兜底补充） #

如果确实没有服务端配置权限，可以用临时的客户端方案实现，注意该方案依赖站点所有404请求都会兜底返回index.html的前提：

1. 先创建专用的处理组件：

import { useEffect } from 'react';

const AppleAppSiteAssociation = () => {
  useEffect(() => {
    // 替换为你自己的AASA配置内容
    const aasaContent = {
      "applinks": {
        "apps": [],
        "details": [
          {
            "appID": "你的苹果团队ID.你的App Bundle ID",
            "paths": ["*"]
          }
        ]
      },
      "webcredentials": {
        "apps": ["你的苹果团队ID.你的App Bundle ID"]
      }
    };

    // 清空页面内容，直接返回JSON
    document.open();
    document.write(JSON.stringify(aasaContent, null, 2));
    document.close();
    document.contentType = 'application/json';
  }, []);
  return null;
};

2. 把对应路由放在Switch的最顶部，优先级高于其他所有路由：

return (
  <Router>
    <Switch>
      <Route path="/apple-app-site-association" component={AppleAppSiteAssociation} />
      {/* 原有路由保持不变 */}
      <Route path="/join-us" component={BusinessFeatures} />
      <Route path="/signIn" component={SignIn} />
      ...some more routes
      <Route path="/">
        <HomePage />
      </Route>
    </Switch>
  </Router>
);

注意事项 #

无论使用哪种方案，都要保证请求/apple-app-site-association时满足：

• 响应状态码为200，无301/302等重定向
• 必须走HTTPS协议
• 响应头Content-Type为application/json

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