避免使用AWS Cloudfront进行CORS，并清理SPA网址

Question

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

通过要求Cloudfront将403和404错误重写为200来产生索引页和 ，从而使
1. 拥有清晰的URL（例如https://keita.blog/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/）
2. 通过向代理服务器/api/*（例如https://stackoverflow.com/a/42883221/1586229）添加云前行为来避免CORS问题。

是否可以同时完成这两项工作？问题在于，cloudfront甚至会将来自api的403和404更改为200 index.html响应。

如果无法做到这一点，您能推荐另一种方法来完成我想做的事情吗？

Answer 1

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

创建一个Lambda函数，该函数将在Origin请求上触发（请参见图表，了解生命周期中到达的位置）。请确保在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 Origin的行为的“ Lambda函数关联”部分。

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

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