[英]How to serve apple-app-site-association file on /apple-app-site-association page in ReactJS
I'm having a lot of trouble with serving a apple-app-site-association file in ReactJS project.我在 ReactJS 项目中提供apple-app-site-association文件时遇到了很多麻烦。
I've searched a lot of GitHub issues pages (for ReactJS, Gatsby, and Angular), forums, and a lot of online communities, and it seems that I can't find a solution for this.我搜索了很多 GitHub 问题页面(针对 ReactJS、Gatsby 和 Angular)、论坛和很多在线社区,似乎找不到解决方案。
What I've tried is :我试过的是:
<link rel="apple-app-site-association" href="%PUBLIC_URL%/.well-known/apple-app-site-association">
into public/index.html添加<link rel="apple-app-site-association" href="%PUBLIC_URL%/.well-known/apple-app-site-association">
到public/index.htmlTesting through the "aasa-validator" returns:通过“aasa-validator”测试返回:
Your file's 'content-type' header was not found or was not recognized.找不到或无法识别您文件的“内容类型”header。
Keep in mind that:请记住:
Thanks in advance!提前致谢!
Ps.附言。 If it helps, I'm using a Heroku for deployment.如果有帮助,我正在使用 Heroku 进行部署。
You can serve the file using React Router.您可以使用 React Router 提供文件。 Put this in your index.js or App.js:把它放在你的 index.js 或 App.js 中:
const reload = () => window.location.reload();
<Route path="/apple-app-site-association" onEnter={reload} />
More details here: https://brainbank.cc/jamie/lessons/programming-react/serve-static-file-txt-html-via-react-router更多细节在这里: https://brainbank.cc/jamie/lessons/programming-react/serve-static-file-txt-html-via-react-router
several days have passed and I didn't find an answer or solution.几天过去了,我没有找到答案或解决方案。 (And I really hate to see an unanswered stackoverflow question when I'm searching for a solution) (当我在寻找解决方案时,我真的很讨厌看到一个未回答的 stackoverflow 问题)
I've talked to a lot of people and pretty much everyone said this is impossible.我和很多人谈过,几乎每个人都说这是不可能的。 Reason for that is that ReactJS is unable to return JSON type of response upon client sending a GET request.原因是 ReactJS 在客户端发送 GET 请求时无法返回 JSON 类型的响应。
So we transfered the file onto the back-end side which is working perfectly.因此,我们将文件传输到运行良好的后端。
tl;dr It's not possible. tl;博士这是不可能的。
As discussed here , it is possible to server apple-app-site-association
from NextJs.正如这里所讨论的,可以从 NextJs 提供apple-app-site-association
服务。
Next.js uses the extension to automatically detect the
content-type
of the file. Next.js 使用扩展名自动检测文件的content-type
。 Since the file is extensionless, it's served as binary content—this should be compatible with Apple's verification.由于该文件是无扩展名的,因此它是作为二进制内容提供的——这应该与 Apple 的验证兼容。If Apple requires specific headers, you can overwrite this type:如果 Apple 需要特定的标头,您可以覆盖此类型:
// next.config.js module.exports = { experimental: { headers() { return [ { source: "/.well-known/apple-app-site-association", headers: [{ key: "content-type", value: "application/json" }] } ]; } } };
For CRA: The file apple-app-site-association should be added to the public folder or public/.well-known folder.对于 CRA:应将文件 apple-app-site-association 添加到 public 文件夹或 public/.well-known 文件夹。 This alone won't make it work.仅此一项是行不通的。 Because it is served with a content-type of application/octet-stream.因为它以应用程序/八位字节流的内容类型提供服务。 To fix it, we should use a solution provided by the hosting provider.要修复它,我们应该使用托管服务提供商提供的解决方案。
For Firebase: I am using Firebase for hosting my CRA app.对于 Firebase:我正在使用 Firebase 来托管我的 CRA 应用程序。 So, for firebase, it is possible to specify the response headers for the path.因此,对于 firebase,可以指定路径的响应头。 The following gist shows how to do this. 以下要点显示了如何执行此操作。 Make sure that the appAssociation should also be set to prevent firebase dynamic links from serving some other AASA file.确保还应设置 appAssociation 以防止 firebase 动态链接为其他 AASA 文件提供服务。
firebase.json config firebase.json 配置
{
"hosting": {
"public": "public",
"headers": [
{
"source": "/.well-known/apple-app-site-association",
"headers": [
{
"key": "Content-Type",
"value": "application/json"
}
]
}
],
"appAssociation": "NONE"
}
}
Disclaimer: This is only applicable if you have an Nginx implementation.免责声明:这仅适用于您具有 Nginx 实施的情况。
I got stuck on this and couldn't figure out a way to add the apple site association file to the react code in any way.我陷入了困境,无法想出以任何方式将苹果站点关联文件添加到反应代码的方法。 However, I was able to solve the issue by looking outside the react box and inside my server configuration box ie Nginx.但是,我能够通过查看反应框外部和服务器配置框内部(即 Nginx)来解决该问题。
Here are the steps:以下是步骤:
/var/www/certificates/ios/ /var/www/certificates/ios/
cd /etc/nginx/sites-available/ cd /etc/nginx/sites-available/
sudo vim mayank-web-app sudo vim mayank-web-app
location / {地点 / {
location /apple-app-site-association {
alias /var/www/certificates/ios/;
index apple-app-site-association.json
autoindex on; }
wq!哇!
sudo nginx -t须藤 nginx -t
You should get this as output你应该得到这个 output
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
cd../sites-enabled 9. Update the symlink here sudo ln -s /etc/nginx/sites-available/example-web-app. cd../sites-enabled 9. 在此处更新符号链接 sudo ln -s /etc/nginx/sites-available/example-web-app。
sudo service nginx reload须藤服务 nginx 重新加载
a.一个。 https://branch.io/resources/aasa-validator/#resultsbox . https://branch.io/resources/aasa-validator/#resultsbox 。
b.湾。 https://example.com/apple-app-site-association https://example.com/apple-app-site-association
PS I came across the solution here - https://matheswaaran.medium.com/serving-apple-app-site-association-file-using-nginx-for-react-apps-89b2d48a9fa4 PS我在这里遇到了解决方案 - https://matheswaaran.medium.com/serving-apple-app-site-association-file-using-nginx-for-react-apps-89b2d48a9fa4
I has this problem using react/redux and Next.js this is how I solved the issue我使用 react/redux 和 Next.js 遇到了这个问题,这就是我解决问题的方法
in my /static folder I put my apple-app-site-association在我的 /static 文件夹中,我把我的 apple-app-site-association
{
"webcredentials": {
"apps": ["12345431.com.app"]
},
"applinks": {
"apps": [],
"details": [
{
"appID": "12345431.com.app",
"paths": [ "*"]
}
}
]
}
}
I created a component called Apple AppleAssociation.jsx in that file I have我在我拥有的那个文件中创建了一个名为 Apple AppleAssociation.jsx 的组件
import React from 'react'
function AppleAssociation() {
return (
//path to apple app site association file
<>
<link rel="apple-app-site-association file" href="/static/apple-app-site-association" />
</>
)
}
export default AppleAssociation
and in my _app.jsx file I import that into my head在我的 _app.jsx 文件中,我将其导入我的脑海
import React from 'react'
import Head from 'next/head'
import withRedux from 'next-redux-wrapper'
import App, { Container as NextContainer } from 'next/app'
import { Provider as ReduxProvider } from 'react-redux'
import {
AppleAssociation,
} from '../components/head'
import makeStore from '../lib/store'
class CustomApp extends App {
static async getInitialProps({ Component}) {
let pageProps = {}
return {
pageProps,
}
}
componentDidMount() {
}
render() {
const { Component, pageProps, session, store } = this.props
return (
<NextContainer>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimal-ui"
/>
<AppleAssociation />
</Head>
<ReduxProvider store={store}>
<NextSeo config={seo} />
<Component {...pageProps} />
</ReduxProvider>
</NextContainer>
)
}
}
export default withRedux(makeStore)(CustomApp)
you can test this by using https://branch.io/resources/aasa-validator/#resultsbox您可以使用https://branch.io/resources/aasa-validator/#resultsbox对此进行测试
We serve our CRA app using the npm serve
CLI package. This is what we did to resolve the issue of serving our extension-less apple-app-site-association
file.我们使用 npm serve
CLI package 服务我们的 CRA 应用程序。这就是我们为解决服务我们的无扩展apple-app-site-association
文件的问题所做的。
The fix for this is to create the apple-app-site-association
as apple-app-site-association.json
inside your public/.well-known
directory and then create a rewrite rule inside of a file in your public directory called serve.json
.解决方法是在public/.well-known
目录中创建apple-app-site-association
as apple-app-site-association.json
,然后在公共目录中名为serve.json
的文件中创建一个重写规则serve.json
。 The contents of that file should look like this.该文件的内容应如下所示。
{
"rewrites": [
{
"source": "!.well-known/**",
"destination": "index.html"
},
{
"source": ".well-known/apple-app-site-association",
"destination": ".well-known/apple-app-site-association.json"
}
]
}
Then when you start your static file server, you don't use the -s
or --single
argument.然后,当您启动 static 文件服务器时,您不使用-s
或--single
参数。 You start it using the following command.您可以使用以下命令启动它。
serve -c serve.json
The first item will send all requests that don't exist inside of.well-known to index.html, and the second rewrite will send requests for that specific URL to the apple-app-site-association.json
file and assign a content-type: application/json
header to it.第一项会将所有不存在于 of.well-known 中的请求发送到 index.html,第二项重写会将针对特定 URL 的请求发送到apple-app-site-association.json
文件并分配一个content-type: application/json
header 给它。 All other files with file extensions should be served as normal, ignoring any rewrite rules.具有文件扩展名的所有其他文件应正常提供,忽略任何重写规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.