8

我在 ReactJS 项目中提供apple-app-site-association文件时遇到了很多麻烦。

我搜索了很多 GitHub 问题页面（针对 ReactJS、Gatsby 和 Angular）、论坛和很多在线社区，似乎找不到解决方案。

我试过的是：

  • 将文件添加到 public/.well-known 文件夹中。
  • 通过路径“/apple-app-site-association”上的 react-router 添加单独的路由并返回带有文件的标签
  • 添加<link rel="apple-app-site-association" href="%PUBLIC_URL%/.well-known/apple-app-site-association">到public/index.html

通过“aasa-validator”测试返回：

找不到或无法识别您文件的“内容类型”标头。

请记住：

  • apple-app-site-association JSON 文件不得具有 .json 文件扩展名。
  • 它必须位于网站上的“/apple-app-site-association”或“./well-known/apple-app-site-association”链接上。
  • 我不能使用重定向到另一个页面/链接。

提前致谢！

附言。如果有帮助，我正在使用 Heroku 进行部署。

4

5 回答 5

2

您可以使用 React Router 提供文件。把它放在你的 index.js 或 App.js 中：

const reload = () => window.location.reload();
<Route path="/apple-app-site-association" onEnter={reload} />

更多细节在这里： https ://brainbank.cc/jamie/lessons/programming-react/serve-static-file-txt-html-via-react-router

于 2020-06-09T17:06:06.703 回答
1

正如这里所讨论的，可以apple-app-site-association从 NextJs 提供服务器。

Next.js 使用扩展名自动检测content-type文件的名称。由于该文件是无扩展名的，因此它是作为二进制内容提供的——这应该与 Apple 的验证兼容。

如果 Apple 需要特定的标头，您可以覆盖此类型：

// next.config.js
module.exports = {
  experimental: {
    headers() {
      return [
        {
          source: "/.well-known/apple-app-site-association",
          headers: [{ key: "content-type", value: "application/json" }]
        }
      ];
    }
  }
};
于 2021-01-19T10:05:45.380 回答
1

几天过去了，我没有找到答案或解决方案。（当我在寻找解决方案时，我真的很讨厌看到一个未回答的 stackoverflow 问题）

我和很多人谈过，几乎每个人都说这是不可能的。原因是 ReactJS 在客户端发送 GET 请求时无法返回 JSON 类型的响应。

因此，我们将文件传输到运行良好的后端。

tl;博士 这是不可能的。

于 2020-05-21T12:59:47.980 回答
0

免责声明：这仅适用于您有 Nginx 实现的情况。

我陷入了困境，无法想出以任何方式将苹果站点关联文件添加到反应代码的方法。但是，我能够通过查看反应框外部和服务器配置框（即 Nginx）内部来解决该问题。

以下是步骤：

  1. 在服务器中将 AASA 或 apple-app-site-association.json 文件存储在特定位置 - 我选择将其存储在（必须创建两个证书和 ios 目录）

/var/www/certificates/ios/

  1. 现在转到站点可用文件夹

cd /etc/nginx/sites-available/

  1. 在这里，您将找到包含您的 Web 应用程序的 Nginx 配置信息的文件。假设我的文件名为example-web-app，因此使用具有 sudo 权限的 vim 打开文件：

sudo vim mayank-web-app

  1. 现在在这个文件中，你需要找到

地点 / {

  1. 在此行上方粘贴此代码块
location /apple-app-site-association {
        alias /var/www/certificates/ios/;
        index apple-app-site-association.json
        autoindex on; }
  1. 现在保存文件并退出，按esc并键入

哇！

  1. 现在通过键入检查更改是否有效

须藤 nginx -t

你应该得到这个作为输出

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
  1. 在此之后，您将必须转到启用站点的目录

cd ../sites-enabled 9. 在此处更新符号链接 sudo ln -s /etc/nginx/sites-available/example-web-app 。

  1. 现在重新加载 nginx 服务

sudo 服务 nginx 重新加载

  1. 现在您可以使用两种方法进行检查：

一个。https://branch.io/resources/aasa-validator/#resultsbox。
湾。https://example.com/apple-app-site-association

于 2022-01-13T20:43:10.240 回答
0

对于 CRA：应将文件 apple-app-site-association 添加到 public 文件夹或 public/.well-known 文件夹。仅此一项是行不通的。因为它以应用程序/八位字节流的内容类型提供服务。要修复它，我们应该使用托管服务提供商提供的解决方案。

对于 Firebase：我正在使用 Firebase 托管我的 CRA 应用程序。因此，对于 firebase，可以指定路径的响应标头。以下要点显示了如何执行此操作。确保还应设置 appAssociation 以防止 Firebase 动态链接提供其他 AASA 文件。

firebase.json 配置

{
  "hosting": {
    "public": "public",
    "headers": [
      {
        "source": "/.well-known/apple-app-site-association",
        "headers": [
          {
            "key": "Content-Type",
            "value": "application/json"
          }
        ]
      }
    ],
    "appAssociation": "NONE"
  }
}
于 2021-09-22T11:26:57.117 回答