我有一个 Vuejs 应用程序的 S3 存储桶,其内容显示在链接中
为了交付该内容,我在 Cloudfront 中进行了分发。为了确保分发安全,我创建了一个 OAI 以关联到 Cloudfront 分发和 S3 存储桶。 ** 分发源是桶而不是桶域。因此,当我请求 Cloudfront 域时,会显示登录页面,单击登录按钮后会启动 OIDC 流程,并且当请求回调路由器时会显示拒绝访问的页面,如链接所示。为了尝试解决这个问题,我在 CLoudfront 中创建了一个函数来检查 url 并呈现 index.html,但这没有用。我怎样才能解决这个问题?请记住,我没有其中包含 index.html 的子目录。我有一个 index.html 加载在 vue 进程中构建的 js 脚本
我解决了在 Cloudfront 发行版中注册错误页面的问题,在我的例子中是 403 错误代码,因此当 403 启动时,Cloudfront 重定向到 index.html,vue 从那里知道该做什么。顺便说一句,我在这里找到了解决方案answer
您可能需要考虑在您的 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>