Блог

Я развернул приложение React (интерфейс) на S3 и Laravel PHP API (серверную часть) через Elastic Beanstalk на AWS. В моем приложении react есть вызовы API на моем бэкэнде, но, к сожалению, они заблокированы CORS.

Доступ к XMLHttpRequest по адресу ‘http://platform-name-api.eu-central-1.elasticbeanstalk.com/api/v1/something » из источника «http://platform-name-web.s3-website.eu-central-1.amazonaws.com ‘ заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе.

Кто-нибудь знает, в чем проблема?

Заголовок HTTP-ответа Access-Control-Allow-Origin, упомянутый в сообщении об ошибке, является частью стандарта CORS, который позволяет предоставленному лицу явно предоставлять разрешение вашему сайту на доступ к данным через браузер.

Базовая реализация будет просто включать в себя:

Управление доступом-Разрешить-Источник: *

Заголовки ответов, позволяющие любому веб-сайту считывать данные.

Управление доступом-Разрешить-Источник: http://ExampleHelloWorld.com /

Это позволит получить к нему доступ только определенному сайту, и предоставленный пользователь может динамически генерировать его на основе заголовка исходного запроса, чтобы разрешить доступ к нему нескольким, но не всем сайтам.

Чтобы решить эту проблему, конфигурация CORS должна быть включена для определенного сегмента, см. Этот документ

Обновленный ответ: (Если CORS отключен из API)

Когда браузер получает непростой HTTP-запрос, протокол CORS требует, чтобы браузер отправил предварительный запрос на сервер и дождался утверждения (или запроса учетных данных) с сервера перед отправкой фактического запроса. Предполетный запрос отображается в вашем API как HTTP-запрос, который

Необходимо убедиться, что сервер может прослушивать предполетный запрос

• (какие будут ВАРИАНТЫ (а не GET, POST или что бы вы ни пытались отправить)
• Ответьте на него правильным заголовком Access-Control-Allow-Origin, а также Access-Control-Allow-Methods
• Access-Control-Allow-Headers для разрешения ваших конкретных HTTP-методов или заголовков

как упоминалось в этом документе