时间戳

首页 > 解决方案 > 将 S3 请求 URL 上的静态反应网站重写为自己的 URL

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

问题描述

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

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

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

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

我正在查看 stackoverflow 帖子（反应路由器在 aws s3 存储桶中不起作用），但不幸的是它没有帮助。

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

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

在此处输入图像描述

标签： reactjsamazon-web-servicesamazon-s3

解决方案

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

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

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

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

推荐阅读