S3 CloudFront React SPA возвращает 403 из-за хэштега, но не может настроить страницу ошибки 403

К сожалению, Auth0 добавляет хэштег в URL-адрес обратного вызова для одностраничных приложений. См. пример ниже.

https://stage.domain.com/callback#access_token=...&otherQueryParam=...

Это возвращает ошибку 403 в моей среде S3 и Cloudfront.

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>...</RequestId>
<HostId>
...
</HostId>
</Error>

Решения, которые я видел в Интернете, включают создание дополнительной пользовательской конфигурации обработки ошибок в CloudFront для перенаправления любых ошибок 403 на 200 и отображения index.html.

Однако я не могу этого сделать, поскольку промежуточная среда доступна только через VPN и существует правило WAF, которое блокирует. strong> все IP-адреса, кроме VPN. Если бы я разрешил ошибку 403, это сделало бы правило WAF бесполезным и публично открыло бы мою промежуточную среду.

Хотелось бы, чтобы мой React SPA размещался в S3 для простоты масштабирования, однако похоже, что мне, возможно, придется развернуть какой-то EC2 с Nginx.

Политика корзины

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ..."
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::stage.domain.com/*"
        }
    ]
}

Каковы некоторые предлагаемые решения этой проблемы?