如何解决 SPA 上的“x-cache: Error from cloudfront”

Question

我们在尝试使用客户端路由器（反应路由器）使用 SPA 时遇到问题。我们正在使用 has a 的概念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：

如果我们在https://www.example.com没有任何查询参数（不是查询字符串）的情况下访问主 url ，一切正常。

我该如何解决这个问题并使我的所有动态 URL 都能正常工作？

谢谢。

Answer 1

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

但是如果你重新加载页面，http://mywebsite.com/stats将被发送到 S3，因为你的浏览器不知道你正在运行一个 React 应用程序。

S3 将返回带有 index.html 的 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