Cors: строгое происхождение при перекрестном происхождении: реагировать + nginx + elasticsearch

Сегодня днем ​​я внес небольшие изменения в свое приложение для реагирования. Однако при попытке получить информацию с моего сервера elasticsearch я получаю ошибку strict-origin-when-cross-origin. Я получал ошибки CORS в прошлом и всегда мог справиться с ними определенным образом, но на этот раз я застрял.

Моя установка:

У меня есть приложение для реагирования, использующее axios и делающее следующий запрос на получение:

const authorization = process.env.REACT_APP_ELASTICSEARCH_AUTHORIZATION;

const header = {
'Authorization': authorization,


}

axios.get(`${path}/${searchIndex}/_search`,
            {headers: header}

Затем запрос отправляется на мой прокси-сервер, на котором работает nginx.

Настройка там следующая:

location /somelocation/ {
         proxy_pass https://someip:someport/;
         proxy_redirect off;
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header  Host $http_host;
         proxy_pass_header Access-Control-Allow-Origin;
         proxy_pass_header Access-Control-Allow-Methods;
         proxy_hide_header Access-Control-Allow-Headers;
         add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type';
         add_header Access-Control-Allow-Credentials true;
         proxy_pass_header Authorization; 
}

На сервере elasticsearch у меня есть следующие настройки CORS:

http.cors.enabled: true
http.cors.allow-credentials: true
http.cors.allow-origin: '*'
http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE

Выполнение запросов с использованием пути, используемого реагирующим приложением, от почтальона работает отлично. Я также могу выполнить запрос из своего браузера, предварительно указав необходимый логин + пароль. Только приложение для реагирования (в разработке, работающем на локальном хосте), похоже, не работает.

Из https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors я понимаю:

strict-origin-when-cross-origin (default)

Send the origin, path, and querystring when performing a same-origin request. For cross-origin requests send the origin (only) when the protocol security level stays same (HTTPS→HTTPS). Don't send the Referer header to less secure destinations (HTTPS→HTTP).

Я подумал, что, возможно, проблема была связана с тем, что приложение работает по HTTP, а не по HTTPS, но запуск приложения через «HTTPS = true npm start» не решил проблему. Я пробовал разные настройки, как на стороне запроса (axios), так и в nginx или в файле es yml, но ничего не работает. Спасибо и низкий поклон за вашу помощь.

Обновлено:

теперь также включены скриншоты:

Cors: строгое происхождение при перекрестном происхождении: реагировать + nginx + elasticsearch

Cors: строгое происхождение при перекрестном происхождении: реагировать + nginx + elasticsearch

Access-Control-Allow-* являются заголовками отклик, а не заголовками запрос. Проверьте developer.mozilla.org/en-US/docs/Web/HTTP/CORS
jub0bs 17.03.2022 18:36

правда действительно. Адаптировал код, но все та же ошибка CORS. Благодарю за ваш ответ.

frankmurphy 18.03.2022 08:02

Пожалуйста, покажите скриншот рассматриваемой ошибки.

jub0bs 18.03.2022 08:23

теперь включено в вопрос. Спасибо за вашу помощь

frankmurphy 18.03.2022 09:41

Вам нужно показать нам сообщение об ошибке на консоли. Сообщение об ошибке, доступное для вашего JS-кода, сведено к общему уровню сетевой ошибки по соображениям безопасности.

Quentin 18.03.2022 09:42

strict-origin-when-cross-origin не является ошибкой, это параметр, который описывает, сколько информации помещается в заголовок Referer.

Quentin 18.03.2022 09:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
6
284
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, я смог решить ошибку в течение дня. Во-первых, не все сообщения об ошибках отображались в моей консоли, что, конечно, затрудняло обнаружение ошибки. Как правильно указано выше, сообщение об ошибке, которое я видел, было просто общим сообщением. В моей консоли мне нужно было обновить настройки до следующего:

После этого были видны полные ошибки CORS, что потребовало от меня внесения некоторых изменений, как в прокси-сервер NGINX, так и в сервер elasticsearch.

Первая ошибка: «Авторизация поля заголовка не разрешена Access-Control-Allow-Headers в предварительном ответе».

Хотя сервер elasticsearch разрешил заголовок авторизации, это было — поправьте меня, если я ошибаюсь — неправильно переданным прокси-сервером NGINX, поскольку настройки там были: «proxy_hide_header Access-Control-Allow-Headers;»

Я изменил настройки NGINX на:

         proxy_pass https://******:9200/;
         proxy_redirect off;
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header  Host $http_host;
         proxy_pass_header Access-Control-Allow-Origin;
         proxy_pass_header Access-Control-Allow-Methods;
#         proxy_hide_header Access-Control-Allow-Headers;
        proxy_pass_header Access-Control-Allow-Headers;
        # add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type';
        # add_header Access-Control-Allow-Credentials true;
         proxy_pass_header Authorization;

Строки, которые закомментированы, являются старыми конфигурациями.

При попытке выполнить несколько новых запросов были показаны другие политики CORS, например, методы разрешения-управления-доступом не разрешены заголовком Access-control-Allow-Headers, начало управления-разрешением-доступом не разрешено Access-Control-Allow-. Заголовки,... На тот момент ошибки четко указывали, что делать, а именно добавлять эти поля в раздел Access-Control-Allow-Headers в файле конфигурации elasticsearch.

После всего, yml-файл конфигурации elasticsearch выглядит так:

http.cors.enabled: true
http.cors.allow-credentials: true
http.cors.allow-origin: '*'
http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE

Поэтому я добавил: Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials.

Спасибо всем за помощь, я публикую этот ответ, чтобы его можно было использовать в будущих целях. Не стесняйтесь поправлять меня дальше.

Другие вопросы по теме

Похожие вопросы

Как запустить цикл внутри набора строк jsx, используя опасноSetInnerHTML
Реагировать на сохранение состояния в LocalStorage с помощью useEffect
Django, JWT, React перенаправляют на другую базу страниц в другой группе после входа в систему
Реагировать на ввод, я определил состояние в начальное состояние, но все равно получаю предупреждение о смене неконтролируемого на контролируемый ввод
Redux useselector возвращает неопределенное значение, когда я пытался найти значение из массива состояний redux в соответствии с идентификатором useParams
Передача свойств интерфейса Typescript дочернему компоненту возвращает несуществующие свойства
Вопросительный знак в ответной нативной навигации при использовании экспо/векторных значков
Слияние службы направлений Google и результатов направлений
Получение элемента, который был нажат в функциональном компоненте в React
У меня проблемы с Redujx-toolkit