Приложение Angular, размещенное на перенаправлении AWS, запрещает доступ с облачным фронтом впереди S3 - PullRequest
Новая
       13

Приложение Angular, размещенное на перенаправлении AWS, запрещает доступ с облачным фронтом впереди S3

0 голосов
/ 07 апреля 2020

У нас есть одно angular приложение, которое помещается в AWS S3 корзину. У нас есть cloundfront впереди S3, а затем мы используем Route53 для изменений DNS. Допустим, мое приложение можно использовать с mywebsite.abc.xyz, когда оно отображается в браузере и изменяется на mywebsite.abc.xyz/sigin. Теперь, если я refre sh это с адресом как mywebsite.abc.xyz/sigin, то это дает access denied ошибку. Но если я нажму mywebsite.abc.xyz/#/sigin, то это работает нормально.

Чтобы удалить #, я следовал https://zanon.io/posts/angularjs-with-pretty-urls-removing-the-in-amazon-s3, и в хостинге веб-сайтов S3 я внес следующие изменения: enter image description here В правилах перенаправления I поместите код, как показано ниже 

 <RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>mywebsite.abc.xyz</HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

Но после выполнения описанных выше шагов с изменениями в приложении angular я все еще получаю сообщение об ошибке, затем позже я выполнил S3 bucket publi c вслед за https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/ и добавьте в политику корзины, как показано ниже 

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

Но все та же ошибка. Я не уверен, как решить это. Ожидаемый результат - даже если я нажму mywebsite.abc.xyz/signin/, тогда он также должен работать, тогда как он работает с mywebsite.abc.xyz/#/signin

1 Ответ

0 голосов
/ 07 апреля 2020

Вам необходимо добавить пользовательские страницы ошибок в свой дистрибутив CF.

Go в свой дистрибутив, Страницы ошибок -> Создать пользовательский ответ на ошибку .

Добавьте пользовательские правила для 403 и 404, для которых Путь к странице ответа установлен на index.html и HTTP-код ответа из 200. Сохраните его.

Это должно выглядеть следующим образом:

enter image description here

Нет необходимости делать ведро опубликованным c, полагайтесь в политике CF, сгенерированной для вашего.

Причина, по которой эта работа заключается в том, что когда CF пытается получить доступ к источнику и получает ответ 404 или 403, он отправляет на сервер все, что имеет от index.html.

Кроме того, нет необходимости настраивать ваше ведро для обслуживания веб-сайта c, для этого достаточно обычного ведра.

...