Избегайте использования CORS с AWS Cloudfront и чистых URL-адресов SPA

Question

У меня есть одностраничное приложение, которое живет в S3, запущенное Cloudfront. Существует также бэкэнд, с которым SPA общается через запросы AJAX. Я пытаюсь оба:

1. имеют чистые URL-адреса (например, https://keita.blog/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/),, запрашивая cloudfront переписать ошибки 403 и 404 в 200, которые создают страницу индекса, и
2. избегайте проблем с CORS, добавляя поведение облачного фронта для прокси /api/* на сервер (например, https://stackoverflow.com/a/42883221/1586229).

Возможно ли выполнить оба из этих? Проблема в том, что облачный фронт изменит даже 403 и 404, которые приходят из API, в 200 index.html ответы.

Если это невозможно, можете ли вы порекомендовать другой способ выполнить то, что я пытаюсь сделать?

Answer 1

Такое поведение можно выполнить с помощью Lambda @ Edge.Вот план:

Создайте лямбда-функцию, которая будет запускаться при запросе источника (см. Схему, где в жизненном цикле приземляется).Обязательно создайте его в us-east-1, поскольку это единственный регион, в котором можно определить лямбда-выражения в Lambda @ Edge.

Функция выполняет следующую задачу: переписывать запросы к путям типа /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 @ Edge находятся на уровне источника, такое поведение перенаправления не повлияет на ваше поведение /api/*.

Обязательно удалите пользовательские обработчики ошибок.Они вам больше не понадобятся для вашего поведения S3, и вы не хотите их для вашего поведения API.