ОБНОВЛЕНИЕ: мне удалось решить проблему благодаря предложению Шона ниже.
Посмотрите заголовки ответов и определите, куда запрос хочет перенаправить клиента (используя заголовок 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
В рамках проверки CORS браузеры выполняют «предварительный» OPTIONS
запрос к вашему URL-адресу (в данном случае https://api.example.com/admins/login
).
Полученное вами сообщение об ошибке объясняет, почему предполетная проверка не удалась и ваш фактический запрос API был отклонен:
Ответ на предварительный запрос не проходит проверку контроля доступа: перенаправление не разрешено для предполетного запроса.
И
Предполетный ответ не увенчался успехом. Код состояния: 307
Когда клиент отправляет этот предполетный запрос на https://api.example.com/admins/login
, сервер отвечает кодом ответа HTTP 307 Temporary Redirect
, указывая, что он хочет, чтобы клиент перенаправил запрос на другой URL-адрес. Это не допускается во время предполетной подготовки — ответ должен прийти правильно и непосредственно от запрошенной цели.
Современные веб-серверы имеют встроенные функции для обработки предполетных запросов CORS, поэтому я подозреваю, что это перенаправление происходит либо из-за неправильной конфигурации сервера, либо из-за какого-то странного кода приложения.
Для отладки:
Посмотрите заголовки ответов и определите, куда запрос хочет перенаправить клиента (используя заголовок Location
). Это может указывать на то, какая часть вашего стека вызывает проблему.
Проверьте журналы доступа к серверу и приложений. Найдите запросы OPTIONS
и еще раз посмотрите на URL-адрес перенаправления и посмотрите, звонит ли он кому-нибудь.
Если вы регистрируете запросы приложений, вы можете сравнить журналы и посмотреть, попадет ли предварительный запрос в ваше приложение. Если это так, вы знаете, что что-то в приложении перенаправляется. Как бы то ни было, конфигурация CORS, которая есть в коде вашего экспресс-приложения, выглядит нормально.
Проверьте конфигурацию сервера, предполагая, что вы используете что-то вроде nginx в передней части вашего сервера, который пересылает запросы к вашему экспресс-приложению.
Если вы опубликуете более конкретную информацию после дальнейших попыток отладки, я могу уточнить этот ответ, чтобы сделать его более конкретным.
Еще раз здравствуйте, Шон, мне удалось решить проблему, проверив вкладку «Сеть». Если вы хотите узнать больше, пожалуйста, посмотрите раздел обновлений в верхней части моего вопроса.
Эй, просто хотел сказать спасибо за столь подробное объяснение, как это отладить. Это помогло мне найти мою проблему, большое спасибо!
Спасибо за предложения по отладке, Шон! Я постараюсь обработать информацию, чтобы предоставить более подробный контекст, и вернусь через некоторое время.