amazon-web-services - 使用 AWS Cloudfront 避免 CORS，并清理 SPA url

Question

我有一个位于 S3 中的单页应用程序，前面是 Cloudfront。还有一个 SPA 通过 AJAX 请求与之对话的后端。我正在尝试两者：

1. 通过要求 cloudfront 重写 40​​3 和 404 来获得干净的 URL（例如https://keita.blog/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/ ）生成索引页面的错误为 200 秒，以及
2. 通过将云端行为添加到服务器代理来避免 CORS 问题/api/*（如https://stackoverflow.com/a/42883221/1586229）。

有没有可能同时实现这两个？问题是，云端甚至会将来自 api 的 403 和 404 更改为200 index.html响应。

如果这不能完成，你能推荐另一种方法来完成我想要做的事情吗？

标签： amazon-web-servicescorssingle-page-applicationamazon-cloudfront

Answer 1

这种行为可以通过 Lambda@Edge 来完成。这是计划：

创建一个将在 Origin Request 上触发的 Lambda 函数（参见图表了解生命周期的位置）。请务必在 中创建它us-east-1，因为这是唯一可以定义 Lambda@Edge 中使用的 Lambda 的区域。

该函数有以下工作：将请求重写为, /login,/profile等路径。对我来说，我能够制定规则：/anything_other_than_assets/index.html

如果某物有扩展，它就是一种资产。否则，它是一条路径

希望你可以做同样的事情，或类似的事情。这是我的函数体的外观（我使用了节点 8）

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)
}

确保您“发布新版本”，然后复制 arn（位于页面顶部）

将其粘贴到 S3 源行为的“Lambda 函数关联”部分。

由于 Lambda@Edge 函数关联的范围限定为 Origin 级别，因此此重定向行为不会影响您的/api/*行为。

确保删除自定义错误处理程序。您的 S3 行为不再需要它们，您的 api 行为也不需要它们。