使用 AWS Cloudfront 避免 CORS，并清理 SPA url

Question

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

拥有干净的 URL（la https://keita.blog/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/），通过要求云端将 403 和 404 错误重写为生成索引页面的 200 错误，和
通过将云端行为添加到代理 /api/* 到服务器（如）来避免 CORS 问题。

有没有可能同时做到这两个？问题是云端甚至会将来自 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)
}

确保 "Publish a new version"，然后复制 arn（位于页面顶部）

将其粘贴到 S3 Origin 行为的 "Lambda function associations" 部分。

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

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

使用 AWS Cloudfront 避免 CORS，并清理 SPA url

Avoid CORS with AWS Cloudfront, and clean SPA urls

amazon-web-services

cors

single-page-application

amazon-cloudfront