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

【问题标题】：Access Denied when requesting route after authentication - AWS Cloudfront and AWS S3身份验证后请求路由时拒绝访问 - AWS Cloudfront 和 AWS S3
【发布时间】：2022-01-27 02:53:32
【问题描述】：

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

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

【问题讨论】：

标签： amazon-web-services vue.js amazon-s3 single-page-application amazon-cloudfront

【解决方案1】：

您可能需要考虑在您的 S3 中添加一个网页重定向规则，该规则将在逻辑路由（虚拟，属于 vue 路由器而不是物理文件）被命中时为 index.html 文件提供服务，以便您的 CF 获胜不提供 404。这是一个链接，详细解释了S3 redirect rules。

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

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

【讨论】：

其实就像一个403码。感谢您的回复，我会阅读有关 S3 重定向规则的信息。
不客气，温德尔！如果解决方案有效，您可以将此回复标记为答案，以便遇到相同问题的其他人也可以解决问题！
好的，我会的。

【解决方案2】：

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

【讨论】：