Блог

Главная - Вопросы по программированию - Axios — заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе

Axios — заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе

#reactjs #amazon-web-services #amazon-s3 #cors #amazon-cloudfront

#reactjs #amazon-web-services #amazon-s3 #cors #amazon-cloudfront

Вопрос:

Я пытаюсь отправить запрос GET в дистрибутив cloudfront (с исходным кодом корзины S3) через веб-приложение React. Дело в том, что, я думаю, я уже включил настройки в cloudfront И s3, чтобы заголовок «Access-Control-Allow-Origin» был включен в заголовки ответов.

Поведение кэша Cloudfront: введите описание изображения здесь

и конфигурация CORS корзины S3:

 <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Заголовок ответа при использовании terminal / curl для запроса:

 $ curl -i -H "Origin: http://localhost:8000" https://<CLOUDFRONT_URL>/<FILE>

HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 260
Connection: keep-alive
Date: Mon, 21 Sep 2020 00:42:27 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Last-Modified: Sat, 19 Sep 2020 04:40:14 GMT
ETag: "f59d5ad53f657ee2b8edee79703da391"
Accept-Ranges: bytes
Server: AmazonS3
X-Cache: Hit from cloudfront
Via: 1.1 28663e5849ed20a9d037ca8066957991.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: SFO5-C1
X-Amz-Cf-Id: I4t51yGLpfwqbS7QFSjOjuOH9UvxNaBjY8vuIbai53SzVsQ0to4Jaw==
Age: 38

<CONTENT HERE>

Заголовок ответа (и запроса) при использовании axios:
введите описание изображения здесь

Как вы можете видеть, «Access-Control-Allow-Origin» отсутствует в заголовке ответа, когда он отображается для curl в терминале. Как я могу это исправить, чтобы браузер мог отправлять запросы с перекрестным источником? Хорошая ли идея использовать прокси cors anywhere, когда я делаю запрос API?

Комментарии:

1. Как выглядят заголовки ответа при запросе через axios? Какие заголовки запросов отправляются? Каков будет ответ, если вы добавите -H 'Accept: application/json' его в свой запрос curl?

2. Я отредактировал вопрос, чтобы включить информацию, которую вы описали. Если я добавлю заголовок «Accept: application / json», ничего не изменится (он по-прежнему работает и получает содержимое)

3. Интересно, получаете ли вы просто кэшированный ответ — по крайней мере, последнее изменение может это предположить. Вы пробовали шаги, упомянутые здесь ? Вы пробовали сделать недействительным кеш в CloudFront, затем подождать несколько минут, пока он завершится, а затем очистить кеш вашего браузера?

4. Что произойдет, если в дополнение к GET в корзине вы разрешите GET и OPTIONS?

5. Access-Control-Allow-Origin не возвращается, если вы не указываете Origin заголовок (что, похоже, имеет место в вашем запросе Axios). Кроме того, по умолчанию заголовки кэшируются в CloudFront, поэтому, если первый запрос не Origin установлен, кэшированный ответ также не будет Access-Control-Allow-Origin сохранен.