将 S3 请求 URL 上的静态反应网站重写为自己的 URL

Question

我正在尝试在以 CloudFront 作为前端的 AWS S3 存储桶上托管一个静态反应网站。

此外，前端使用 API 作为服务在具有连接域的单独服务器上运行。

但是，当我去我的静态 s3 网站对其进行测试时，我可以在开发者控制台中看到从存储桶到 API 的所有 API 调用都使用存储桶自己的 URL 重写，因此它使用自己的 URL 而不是API 的 URL。

API url 是在环​​境变量中定义的，所以我的第一个想法是在构建期间没有定义环境变量。我打印了构建过程中所有环境变量的输出，它们都是正确的。

我正在查看一个 stackoverflow 帖子 (react router doesn't work in aws s3 bucket)，但不幸的是它没有帮助。

任何帮助或建议将不胜感激。

编辑 我的静态网站托管设置：

Answer 1

您是否在 S3 存储桶上启用了静态网站托管？

https://docs.aws.amazon.com/AmazonS3/latest/userguide/EnableWebsiteHosting.html

可能是您的静态网站托管属性中的重定向规则，您可以尝试以下操作：

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
            "HostName": "<your_website_url>",
            "HttpRedirectCode": "307",
            "Protocol": "https",
            "ReplaceKeyPrefixWith": "#!"
        }
    }
]