如何解决 SPA 上的“x-cache：来自云端的错误”

Posted 2023-02-24

技术标签:

【中文标题】如何解决 SPA 上的“x-cache：来自云端的错误”【英文标题】：How to solve "x-cache: Error from cloudfront" on SPA 【发布时间】：2020-03-28 08:06:55 【问题描述】：

我们在尝试使用客户端路由器（反应路由器）进行 SPA 工作时遇到问题。我们使用 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 都能正常工作？

谢谢。

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

正确。所以，基本上，你也可以忽略它。你不需要 lambda。您可以在 CloudFront 中配置错误响应。因此，对于 403，您可以将 cloudfront 配置为返回 200 并返回您的 index.html。 docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/…【参考方案2】：

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