Было ли у вас когда-нибудь приложение API Node JS, работающее локально на вашем компьютере, и все работает нормально, пока кто-то другой не попытается сделать HTTP-запрос с другого компьютера или домена и пух, нет, что бы вы ни пытались, каждый петиция приведет к запросу OPTIONS? Недавно у меня был этот сценарий в серверной части приложения API, использующего MongoDB и Mongoose. Сначала я подумал, что это плохой запрос со стороны внешнего интерфейса, использующего React JS, почему? Поскольку я использовал Почтальон для выполнения некоторых запросов POST и GET, и все работало нормально, сервер получал правильный запрос, и база данных успешно создавала новый объект. Даже опытные люди указывали на то, что проблема была во внешнем интерфейсе, потому что, если Postman может делать запросы, почему фронтенд этого не делает? Примерно через 2 часа я определил, что проблема связана с серверной частью приложения, потому что с интерфейсом все было в порядке, мы попробовали с такими библиотеками, как Axios и встроенным React функции, такие как .fetch, чтобы сделать запрос, используя почти все необязательные аргументы функции и всевозможные варианты интерфейса, и ничего не сработало. Я снова обратился за помощью. Коллега сказал мне, что у него была такая проблема и была ошибка на стороне сервера, и примерно через 3,5 часа исследований я нашел решение, и на самом деле это была проблема серверной части. Это небольшое объяснение может сэкономить вам много времени. Следующая реализация не моя, я был близок к реализации решения, но Мачо Альварес справился со своей задачей.
Что ж, все это происходит потому, что, когда вы используете запрос на перекрестное происхождение (CORS), браузер или приложение отправляет первый запрос OPTIONS, чтобы убедиться, что у вас есть привилегии выполнить петицию, такую как POST, GET , PUT и т. Д. По всей видимости, Postman отправит только запрос, который вы запросили . С другой стороны, браузеры сначала отправят запрос OPTIONS, а затем фактический запрос. Это объясняет, почему Postman работал нормально, а интерфейс - нет.
На изображении выше говорится, что если у вас есть запрос в том же домене (синее изображение), он не будет контролироваться CORS, поэтому у вас есть все требования для выполнения любого HTTP-запроса, и ваша петиция не будет содержать запрос OPTIONS. С другой стороны, красное изображение размещено в другом домене, поэтому приложение отправит запрос OPTIONS до настоящей петиции GET. Это необходимо для того, чтобы убедиться, что вам разрешено отправлять HTTP-запросы в этот домен, чтобы эти петиции обрабатывались CORS, и если ваш сервер не настроен для обработки запроса OPTIONS, ваш «реальный» петиция (GET, POST и т. д.) не будет обрабатываться API, потому что она ответит на петицию OPTIONS и «забудет» о фактическом запросе.
Как это исправить?
В моем примере приложения я использую Express для HTTP-запросов и npm для установки пакетов Node.
Самый простой способ исправить это - установить пакет cors с
npm install cors
После этого потребуйте пакет cors в своем HTTP-запросе следующим образом:
Допустим, у вас есть приложение, у которого есть клиенты, ваш файл, в котором вы управляете маршрутами, будет выглядеть примерно так:
Взгляните на приведенный выше код. Нам нужен пакет cors, а затем мы используем его для создания маршрутизатора для HTTP-запроса «options». Теперь наше приложение знает, что делать, когда оно получает запрос OPTIONS, и CORS обработает этот запрос. То же самое происходит в нашем методе POST. Мы помещаем метод cors () в качестве параметра для обработки запроса из другого домена. Вы должны вставить метод cors () в каждый метод маршрутизатора, который, как вы знаете, получит запрос внешнего домена. Существуют и другие параметры, которые вы можете применить к CORS, чтобы разрешить некоторые соединения с учетными данными только с Access-Control-Allow-Credentials: true | false, определенные типы запросов с Access-Control-Allow-Methods: <method>[, <method>]* и типом данных wi и поля заголовков с Access-Control-Allow-Headers: <field-name>[, <field-name>]*, определенные домены с Access-Control-Allow-Origin: "domain.example" эти предпочтения должны быть установлены при запуске сервера с приложением .use (параметр).
И теперь наше приложение может обрабатывать запрос OPTIONS и будет работать как шарм!
