身份验证后请求路由时访问被拒绝 - AWS Cloudfront 和 AWS S3

Question

我有一个 Vuejs 应用程序的 S3 存储桶，其内容显示在 link s3 bucket content

为了传递该内容，我在 Cloudfront 中进行了分发。为了确保分发安全，我创建了一个 OAI 以关联到 Cloudfront 分发和 S3 存储桶。 ** 分发源是桶而不是桶域。因此，当我请求 Cloudfront 域时，会显示登录页面，单击登录按钮后会启动 OIDC 流程，并且当请求回调路由器时会显示拒绝访问的页面，如 link 显示 acess denied.为了尝试解决这个问题，我在 CLoudfront 中创建了一个函数来检查 url 并呈现 index.html，但这没有用。我怎样才能解决这个问题？请记住，我没有其中包含 index.html 的子目录。我有一个 index.html 加载在 vue 进程中构建的 js 脚本

Answer 1

您可能需要考虑在您的 S3 中添加一个网页重定向规则，如果逻辑路由（虚拟，属于 vue 路由器而不是物理文件）被命中，该规则将为 index.html 文件提供服务您的 CF 不会提供 404 服务。这是一个 link 解释更多关于 S3 redirect rules.

您可以尝试在 S3 存储桶的重定向规则中添加此代码：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com</HostName>
      <ReplaceKeyWith>index.html</ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

Answer 2

我解决了在 Cloudfront 分发中注册错误页面的问题，在我的例子中是 403 错误代码，所以当 403 启动时，Cloudfront 重定向到 index.html，vue 从那里知道该做什么。顺便说一句，我在这里

找到了解决方案