如何在SPA上解决"x-cache:来自cloudfront的错误“

Question

我们在尝试将SPA与客户端路由器(react路由器)配合使用时遇到问题。我们使用DOMAIN -> CDN (CloudFront) -> S3的概念来服务我们的静态文件。

我们已经将S3配置为提供静态文件。CDN被配置为具有来自S3的来源，我们已经配置了自定义错误页面来捕获错误：

​

​

使用此配置，我们可以捕获如下错误：

https://www.example.com/custom-url

CDN会将所有的404/403错误重定向到主index.html，react router会得到正确的路由。

我们的站点工作正常，客户端路由器工作正常，但我们的CDN对x-cache: Error from cloudfront的响应有问题

​

​

如果我们不使用任何查询参数(而不是查询字符串)来访问主url https://www.example.com，那么一切都可以正常工作。

我怎样才能解决这个问题，让我所有的动态URL都能工作呢？

谢谢。

Answer 1

当您访问http://mywebsite.com时，请求将命中S3中的index.html文件。然后，你可以点击一个按钮，进入http://mywebsite.com/stats，这是你的SPA应用程序的内部路由。因此，它不会触发任何后端请求。

但是，如果您重新加载页面，http://mywebsite.com/stats将被发送到S3，因为您的浏览器不知道您正在运行SPA前端。

使用index.html时，S3将返回403错误，而Cloudfront将向您发送该错误。

解决方案是在Cloudfront中使用边缘lambda函数。下面是一个示例：

const path = require('path')

exports.handler = (evt, ctx, cb) => {
    const {request} = evt.Records[0].cf

    if (!path.extname(request.uri)) {
        request.uri = '/index.html'
    }

    cb(null, request)
}

来源：https://hackernoon.com/how-to-host-a-single-page-application-with-aws-cloudfront-and-lambda-edge-39ce7b036da2

Answer 2

亚马逊CloudFront可能会在配置和调试错误代码方面变得棘手-要追踪其根本原因可能需要几个小时。但是，在进入日志之前，您可能需要进行以下检查。

存储桶名称！

存储桶名称应与您托管的网站名称相匹配。

例如，要将your-domain.com网站托管在

S3上，您需要创建一个名为your-domain.com.的存储桶

要在www.your-domain.com，下托管网站，应将存储桶命名为www.your-domain.com.

最好同时为your-domain.com和www.your-domain.com创建存储桶。

对这些存储桶中的任何一个使用设置/配置中的现有逻辑，并使用它为静态网站提供服务。使用另一个存储桶将请求重定向到原始存储桶。

​

​

老实说，这不会给你带来麻烦，因为你已经将你的系统与亚马逊CloudFront集成在一起，它可以配置为使用任何名称的亚马逊S3存储桶。

使用亚马逊CloudFront，访问您的域的用户将直接从CloudFront分发中获取数据，该分发反过来会从我们的S3存储桶中缓存内容。

配置分发的原始设置。

在使用亚马逊CloudFront创建分发时，请记下与原始域名相关联的亚马逊S3端点。确保使用网站终结点，而不是 REST终结点。不要使用CloudFront自动建议的端点。

如Amazon Web Services official documentation中所述，行为存在差异

4XX错误代码！

从您的控制台日志中，它表明分发实例正在尝试访问禁止的元素、页面或资源，因此出现403状态代码。

而404仅仅是未找到页面的结果。但是，在错误重定向之后-就像在您的配置中处理的那样，用户被重定向回index.html，在那里它遇到了403。

更多信息请访问- How CloudFront Processes and Caches HTTP 4xx and 5xx Status Codes from Your Origin

其他常见的疑点包括亚马逊CloudFront分发的缓存配置、亚马逊Route53设置和亚马逊证书管理器。

正如一开始提到的，在跟踪这样的错误时，它可能会变得非常令人困惑。如果以上内容有帮助，请告诉我们。此外，如果您能发布您的调查和发现的最新情况，我将非常感激。

谢谢你的阅读。