Ошибка Fastify: доступ к XMLHttpRequest на api-dev.example.com из источника dev.example.com заблокирован политикой CORS
У меня есть серверный сервер Node.js(v20.10.0), использующий Fastify(v4.26.2) в качестве основы.
У меня есть index.js в качестве точки входа.
import Fastify, { FastifyInstance, FastifyServerOptions } from 'fastify';
import cors from '@fastify/cors';
// Assuming other settings and configurations are already written.
fastify.register(cors, {
origin: "https://dev.example.com",
credentials: true,
});
У меня есть GET API, вызываемый для составления списка пользователей https://api-dev.example.com/api/v1/users, который работает нормально.
Но проблема связана с POST API, где я могу создать пользователя https://api-dev.example.com/api/v1/create-user.
При использовании любого POST API я получаю CORS Error
Доступ к XMLHttpRequest по адресу «https://api-dev.example.com/api/v1/create-user» из источника «https://dev.example.com» заблокирован политикой CORS: ответ на предварительный запрос не 'не проходит проверку контроля доступа: значение заголовка 'Access-Control-Allow-Origin' в ответе не должно быть подстановочным знаком '*', если режим учетных данных запроса - 'include'. Режим учетных данных запросов
Я попробовал несколько подходов и все равно получил ту же ошибку.
fastify.register(cors, {
origin: "*",
credentials: true,
});
По ошибке я понимаю, что запрос OPTION получает
в заголовках ответов Access-Control-Allow-Origin: * поэтому я получаю эту ошибку.
Но во всех GET заголовках ответов API Access-Control-Allow-Origin: https://dev.example.com
Я не уверен, почему запрос OPTION перед запросом POSTAccess-Control-Allow-Origin равен *
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если ваш запрос GET работает нормально, но у вас возникли проблемы с запросами POST или PATCH, то в соответствии с вашей ошибкой
Access to XMLHttpRequest at 'https://api-dev.example.com/api/v1/users' from origin 'https://dev.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests
Эта ошибка указывает на то, что браузер отправляет запрос OPTIONS на сервер с заголовком Access-Control-Allow-Origin, имеющим подстановочный знак «*», в то время как ваш сервер принимает только определенные источники происхождения.
Причина этого в том, что каждый запрос POST и PATCH инициирует предварительный запрос. В отличие от простых запросов, для «предварительных» запросов браузер сначала отправляет HTTP-запрос с использованием метода OPTIONS на сервер, чтобы определить, согласен ли сервер на получение запроса POST или PATCH между источниками с сервера.
чтобы исправить это, вы можете попробовать добавив optionsSuccessStatus: 200 в параметры вашего корса, как показано ниже.
fastify.register(cors, {
origin: "https://dev.example.com",
credentials: true,
optionsSuccessStatus: 200,
});
С помощью optionsSuccessStatus: 200 сервер отвечает кодом состояния 200 OK для успешных предполетных запросов.
Это указывает браузеру, что сервер настроен на прием запросов из разных источников.
Теперь, когда сервер подтвердил успешные предварительные запросы, ваши методы POST и PATCH должны работать правильно, не сталкиваясь с проблемами, связанными с CORS.
редактировать: ну, я заметил одну вещь
поскольку запрос POST или PATCH вызовет предполетный запрос с методом OPTION
Я заметил без optionsSuccessStatus: 200 во вкладке сети Chrome
Для метода OPTIONS заголовок запроса имел Access-Control-Allow-Origin: "*", тогда как для метода POST заголовок запроса имел Access-Control-Allow-Origin: "https://dev.example.com".
и вот что говорит ошибка CORS в этом случае
Access to XMLHttpRequest at 'https://api-dev.example.com/api/v1/users' from origin 'https://dev.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests
После добавления optionsSuccessStatus: 200 в конфигурацию запросы OPTIONS и POST имели заголовок запроса Access-Control-Allow-Origin: "https://dev.example.com". В этом случае метод OPTIONS также имел заголовок Access-Control-Allow-Origin: "https://dev.example.com" вместо подстановочного знака *, как это было раньше.
поэтому нам нужно позаботиться об этом!
Кроме того, настройка пользовательского статуса успеха не решает проблему ОП; изменение значения свойства origin с "*" на "https://dev.example.com" произошло.
@jub0bs Да, по определению любой непростой запрос вызывает предполетный запрос. В предоставленном коде конфигурация origin: "https://dev.example.com" также вызывала ошибку CORS. Проблема была решена только после того, как я попробовал optionsSuccessStatus: 200. Я заметил разницу: без «optionsSuccessStatus» в конфигурации предварительный запрос имел origin: "*", что создавало упомянутую выше ошибку. Однако когда я включил в конфигурацию «optionsSuccessStatus», предварительный запрос имел origin: "https://dev.example.com", что решило проблему.
@jub0bs Единственное, что происхождение заголовка в запросах POST и OPTION должно совпадать, чего не было без optionsSuccessStatus: 200 в моей отладке! после optionsSuccessStatus: 200 происхождение заголовка запроса было одинаковым в обоих методах!
Предварительный запрос отправляется браузером, и ни один браузер его не отправит Origin: *.
Вы написали: каждый запрос POST и PATCH инициирует предварительный запрос. Да, каждый запрос PATCH, но не каждый запрос POST; см. Developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests