AWS 不允许我访问静态网站的子页面

Question

我正在使用 AWS S3 存储桶、Cloudfront 和 Route53。有关我如何设置的详细信息，这里有一个链接，指向我告诉人们如何设置这一切的答案。 如果访问 www..com/about 我明白了：

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>PD94JP7DNG6TPDQF</RequestId>
<HostId>
qc0Fvl3fiS7igVeBEYfwvX19so0dH3hmIWNRBOcveK+j4DMmoPZQsxmbeA0XhFisy1BQvxmmrj8=
</HostId>
</Error>

但是，如果我访问 www..com 并使用网站的导航栏转到“关于”部分，我就可以顺利到达那里。所以 AWS 不喜欢我直接点击 about url。我需要做什么才能允许任何子页面被点击？

这可能与以下内容重复：尝试通过我网站上的完整网址访问页面时接收 AccessDenied

如果是这样，我会将其标记为重复，备用。

Answer 1

这听起来像您的网站需要通过索引页面路由请求。这会导致 HTTP 404 错误，该错误可能会被 CloudFront 掩盖为您在此处遇到的 403 错误。

这可能会发生在 React 应用程序中，如果它直接收到 /example 的请求，它会在 S3 存储桶中查找不存在的“示例”文件。您可以通过将 404 错误重定向到可以正确路由的索引页面来处理此问题 - 在 S3 静态网站托管设置中，将错误文档设置为 index.html。

Answer 2

如果您不想使用S3设置或Lambda函数进行重定向等高级操作，或者不想在错误时显示index.html（这会导致不良的用户体验），那么只需更新您的next带有 trailingSlash: true

 的 .config.js

文件，您的子页面可以直接加载。 🚀

const nextConfig = {
    reactStrictMode: true,
    poweredByHeader: false,
    output: "export",
    images: {
        unoptimized: true,
    },
    trailingSlash: true, // for s3 routing
};