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

Question

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

拥有干净的 URL(a la https://keita.blog/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/)，通过要求 cloudfront 将 403 和 404 错误重写为生成索引页的 200，以及

通过向代理添加云前端行为来避免 CORS 问题 /api/*到服务器(如 https://stackoverflow.com/a/42883221/1586229 )。

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

如果这无法完成，您能否推荐另一种方法来完成我正在尝试做的事情？

Answer 1

这种行为可以通过 Lambda@Edge 实现。这是计划:

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



该函数有以下工作:重写对路径的请求，如 /login , /profile , /anything_other_than_assets进入 /index.html .对我来说，我能够制定规则:

Something is an asset if it has an extension. Otherwise, it's a path

希望你可以做同样的，或类似的。这是我的函数体的外观(我使用了节点 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 Origin's Behavior 的“Lambda 函数关联”部分。



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

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