Проблема CORS: перенаправление не разрешено для предполетного запроса

ОБНОВЛЕНИЕ: мне удалось решить проблему благодаря предложению Шона ниже.

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

Проблема заключалась в том, что запрос хотел перенаправить клиента на ссылку, содержащую www. (https://www.example.com/api), которого не было в ссылке Axios Request. Я решил это, добавив www.

ОРИГИНАЛЬНЫЙ ВОПРОС:

Я надеюсь получить помощь с проблемой, с которой я борюсь уже некоторое время. Я разрабатываю веб-приложение с помощью React и NodeJS Express. После развертывания внутренней и внешней частей на Render.com я купил домен и настроил DNS следующим образом:

И проблема связана со следующей ошибкой, которая появляется при выполнении запроса на вход (и любых других требований) от клиента.

Доступ к XMLHttpRequest по адресу «https://api.example.com/admins/login» из источника «https://www.example.com» заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа : перенаправление не разрешено для предполетного запроса.

В Safari я получаю следующее сообщение:

Предполетный ответ не увенчался успехом. Код состояния: 307

На всякий случай сам запрос в Postman успешно выполняется. Кроме того, мне также удалось настроить правило перезаписи в Render, которое перезаписывает запросы с example.com/api/* на api.example.com/* , что также, если оно установлено, выдает ту же ошибку.

Вот моя конфигурация NodeJS CORS, она включена следующими строками:

Что касается исходной ссылки, я знаю, что у некоторых проблема была вызвана отсутствием/наличием косой черты в конце. Я пробовал разные способы, но они не дали никакого эффекта.

const cors = require("cors");
const corsOptions  = {
   origin: "https://example.com/", 
   credentials:true,         //access-control-allow-credentials:true
   optionSuccessStatus:200,
};

app.use(cors(corsOptions));

После интенсивного поиска в Google я попробовал настроить cors следующим образом**, что тоже не помогло**

const cors = require("cors");
app.use(cors());   //also tried including my corsOptions from the previous snippet
app.options('*', cors());

Наконец, я попробовал использовать специальное промежуточное программное обеспечение, представленное в этом ответе, но это тоже не помогло. https://stackoverflow.com/a/13148080/20265378

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
1 137
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

В рамках проверки CORS браузеры выполняют «предварительный» OPTIONS запрос к вашему URL-адресу (в данном случае https://api.example.com/admins/login).

Полученное вами сообщение об ошибке объясняет, почему предполетная проверка не удалась и ваш фактический запрос API был отклонен:

Ответ на предварительный запрос не проходит проверку контроля доступа: перенаправление не разрешено для предполетного запроса.

И

Предполетный ответ не увенчался успехом. Код состояния: 307

Когда клиент отправляет этот предполетный запрос на https://api.example.com/admins/login, сервер отвечает кодом ответа HTTP 307 Temporary Redirect, указывая, что он хочет, чтобы клиент перенаправил запрос на другой URL-адрес. Это не допускается во время предполетной подготовки — ответ должен прийти правильно и непосредственно от запрошенной цели.

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

Для отладки:

  1. Проверьте предполетный запрос. В Chrome предварительная проверка отображается на вкладке «Сеть», пока активен фильтр «Все» или «Другое»:

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

  1. Проверьте журналы доступа к серверу и приложений. Найдите запросы OPTIONS и еще раз посмотрите на URL-адрес перенаправления и посмотрите, звонит ли он кому-нибудь.

    Если вы регистрируете запросы приложений, вы можете сравнить журналы и посмотреть, попадет ли предварительный запрос в ваше приложение. Если это так, вы знаете, что что-то в приложении перенаправляется. Как бы то ни было, конфигурация CORS, которая есть в коде вашего экспресс-приложения, выглядит нормально.

  2. Проверьте конфигурацию сервера, предполагая, что вы используете что-то вроде nginx в передней части вашего сервера, который пересылает запросы к вашему экспресс-приложению.

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

Спасибо за предложения по отладке, Шон! Я постараюсь обработать информацию, чтобы предоставить более подробный контекст, и вернусь через некоторое время.

groove_of_course 25.04.2024 19:06

Еще раз здравствуйте, Шон, мне удалось решить проблему, проверив вкладку «Сеть». Если вы хотите узнать больше, пожалуйста, посмотрите раздел обновлений в верхней части моего вопроса.

groove_of_course 25.04.2024 20:00

Эй, просто хотел сказать спасибо за столь подробное объяснение, как это отладить. Это помогло мне найти мою проблему, большое спасибо!

Julian Declercq 30.06.2024 22:17

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