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

问题描述 投票:0回答:3

我有一个 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
3个回答
2
投票

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


0
投票

您可能需要考虑在您的 S3 中添加一个网页重定向规则,如果逻辑路由(虚拟,属于 vue 路由器而不是物理文件)被命中,那么您的 CF 将不会服务 404。这是一个链接,它解释了有关S3重定向规则的更多信息。

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

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

0
投票

您需要更新 AWS Amplify 控制台中单页应用程序的重写和重定向配置

  1. 转到 AWS Amplify
  2. 选择您的应用程序
  3. App 设置 => 重写和重定向
  4. 添加规则:
  • 来源地址:
    /<*>
  • 目标地址:
    /<*>
  • 类型:
    404 (Rewrite)

保存。一切都已设置好!

© www.soinside.com 2019 - 2024. All rights reserved.