Ошибка CORS при взаимодействии с ЮКасса?
Приветствую. Кто нибудь использовал стороннюю библиотеку @a2seven/yoo-checkout для ЮКасса?
Он почему-то вызывает у меня ошибку политики CORS.
Вот участок кода с настройкой политики:
const corsOptions = { origin: ['https://api.mydomain.ru','https://admin.mydomain.ru', 'https://app.mydomain.ru','http://localhost:3000', 'http://localhost:3005', 'http://localhost:5173'], methods: 'GET,POST,PUT,DELETE,PATCH', // разрешенные методы credentials: true, // Разрешает использование учетных данных (куки, авторизация и т.д.) optionsSuccessStatus: 200 }; app.use(cors(corsOptions)); |
const corsOptions = { origin: ['https://api.mydomain.ru','https://admin.mydomain.ru', 'https://app.mydomain.ru','http://localhost:3000', 'http://localhost:3005', 'http://localhost:5173'], methods: 'GET,POST,PUT,DELETE,PATCH', // разрешенные методы credentials: true, // Разрешает использование учетных данных (куки, авторизация и т.д.) optionsSuccessStatus: 200 }; app.use(cors(corsOptions));
Как только я импортирую библиотеку const { YooCheckout } = require('@a2seven/yoo-checkout')
тут же возникает ошибка в консоли браузера
Access to XMLHttpRequest at 'https://api.mydomain.ru/api/branches' from origin 'https://admin.mydomain.ru' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
И так абсолютно по любому маршруту, а их около сотни.
Причем, на локальной машине все работает корректно, оплаты проходят, веб-хуки от Юкассы приходят, все работает как положено.
Проблема с @a2seven/yoo-checkout именно на сервере. Причем я отключил все, что связано с платежами, оставив только импорт этой библиотеки, ошибка все равно возникает.
Сервер node.js, express, nginx, debian
Клиент react
Дополнительно:
Оказывается я банально забыл установить npm пакеты на сервере после обновления скрипта.
Странно конечно, почему это вызвало ошибку CORS, но сейчас все работает.
Вопрос решен.
Ответы:
У вас в политике не хватает разрешения на OPTIONS, который используется в префлайт-запросах.
https://developer.mozilla.org/en-US/docs/Glossary/...
- Сделал так:
const corsOptions = { origin: ['https://api.mydomain.ru','https://admin.mydomain.ru', 'https://app.mydomain.ru','http://localhost:3000', 'http://localhost:3005', 'http://localhost:5173'], methods: 'GET,POST,PUT,DELETE,PATCH,OPTIONS', // разрешенные методы credentials: true, // Разрешает использование учетных данных (куки, авторизация и т.д.) optionsSuccessStatus: 200 };
const corsOptions = { origin: ['https://api.mydomain.ru','https://admin.mydomain.ru', 'https://app.mydomain.ru','http://localhost:3000', 'http://localhost:3005', 'http://localhost:5173'], methods: 'GET,POST,PUT,DELETE,PATCH,OPTIONS', // разрешенные методы credentials: true, // Разрешает использование учетных данных (куки, авторизация и т.д.) optionsSuccessStatus: 200 };
К сожалению проблема осталась
- crn05, А на OPTIONS даётся правильный ответ? Что в инструментах разработчика в браузере видно?
- Rsa97, уже решил вопрос, оказывается я npm пакеты на сервере не обновил. Все работает. OPTIONS оставил в методах
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с CORS (Cross-Origin Resource Sharing) может возникать при попытке взаимодействия с внешними ресурсами, такими как API ЮКасса. CORS представляет собой механизм, который позволяет веб-страницам запрашивать ресурсы с других доменов, чем тот, с которого была загружена сама страница.
Для решения проблемы с CORS при взаимодействии с ЮКасса, вам необходимо настроить сервер таким образом, чтобы он правильно обрабатывал запросы с других доменов. Вот несколько шагов, которые могут помочь вам решить эту проблему:
1. Добавьте заголовки CORS к ответам сервера. В случае с PHP, вы можете добавить следующий код в ваш скрипт:
header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type");
2. Убедитесь, что ваш сервер отвечает на запросы preflight (OPTIONS) правильно. Для этого также можно добавить следующий код в ваш скрипт:
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type"); exit; }
3. Проверьте, что ваш запрос к API ЮКасса отправляется с правильными заголовками. Убедитесь, что вы используете правильный метод запроса (GET, POST и т.д.) и правильный заголовок Content-Type.
Если после выполнения этих шагов проблема с CORS при взаимодействии с ЮКасса все еще остается, возможно, вам стоит обратиться к документации ЮКасса или к их поддержке за дополнительной помощью.