Почему ошибка CORS?

Question

[df12]

Ошибка:

Access to fetch at 'https://api.site.com/v1/user/me' from origin 'https://site.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
VM28124:71          GET https://api.site.com/v1/user/me net::ERR_FAILED
(анонимная) @ VM28124:71
fetch @ VM28124:70
get @ fetch-wrapper.js?967b:19
getMe @ user.service.js?3ce0:42
eval @ index.jsx?7ffd:11
commitHookEffectListMount @ react-dom.development.js?ac89:23150
commitPassiveMountOnFiber @ react-dom.development.js?ac89:24926
commitPassiveMountEffects_complete @ react-dom.development.js?ac89:24891
commitPassiveMountEffects_begin @ react-dom.development.js?ac89:24878
commitPassiveMountEffects @ react-dom.development.js?ac89:24866
flushPassiveEffectsImpl @ react-dom.development.js?ac89:27039
flushPassiveEffects @ react-dom.development.js?ac89:26984
performSyncWorkOnRoot @ react-dom.development.js?ac89:26076
flushSyncCallbacks @ react-dom.development.js?ac89:12042
commitRootImpl @ react-dom.development.js?ac89:26959
commitRoot @ react-dom.development.js?ac89:26682
finishConcurrentRender @ react-dom.development.js?ac89:25981
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25809
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
VM28124:71                  Uncaught (in promise) TypeError: Failed to fetch
    at <anonymous>:71:39
    at new Promise (<anonymous>)
    at fetch (<anonymous>:70:18)

Хотя в NGINX прописаны правила:

add_header "Access-Control-Allow-Credentials" "true";
add_header "Access-Control-Allow-Headers" "*";
add_header "Access-Control-Allow-Methods" "*";
add_header "Access-Control-Allow-Origin" "*";

function get(url) {
	const requestOptions = {
		method: 'GET',
		headers: authHeader(url),
	};
	return fetch(url, requestOptions).then(handleResponse);
}

С авторизацией было всё окей, а вот получение информации ошибка

Comments

[Антон]

А в тексте ошибки говорится, что нет заголовков на preflight запрос. Посмотрите в devtool во вкладке network - там будет запрос и увидите, какие реально заголовки отдают. От этого и пляшите.

[df12]

Антон, Общие:

URL запроса: https://api.site.com/v1/user/me
Правило для URL перехода: strict-origin-when-cross-origin

Заголовки запросов:

Показаны предварительные заголовки

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL2NvcmUuY29zbW9rYXNzYS5jb20vdjEvcGFydG5lci9hdXRoZW50aWNhdGUiLCJpYXQiOjE2NjM1ODgwODQsImV4cCI6MTY2MzU5MTY4NCwibmJmIjoxNjYzNTg4MDg0LCJqdGkiOiJoMG44aUdGbVROMWdIZ3dCIiwic3ViIjoiMSIsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.Qra1Pc10GOUQ_e127oVSOx0reouSL1EUl4zMr6N07vE
Referer: https://site.com/
sec-ch-ua: "Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Извините, но не могли бы вы мне еще подсказать?

[Антон]

df12, пардон. В хроме действительно заголовки не показываются. Тогда вам надо отправить запрос через какой-нибудь postman или если есть curl - через него.
Но в общем случае, у вас, видимо, конфигурация nginx некорректная, раз браузер не видит этих заголовков в ответе сервера.

[df12]

Антон, возможно.. postman я проверял изначально перед тем как писать сюда вопрос, было всё отлично. Проблему я решил, спасибо.

Answer 1

[Антон Неверов]

Полагаю, вы пытаетесь делать запрос со страницы сайта https://site.com на ваше апи по адресу https://api.site.com/v1/user/me (надеюсь, правильно нагадал)
Сложность в том, что, скорее всего, как правильно заметил Антон при кросдоменных запросах браузер делает preflight-запрос, чтобы убедится, что заголовки CORS есть. Подробнее: https://developer.mozilla.org/en-US/docs/Glossary/...

В вашем же случае, если сервер у вас Express (по тегам неизвестно достоверно), то установить CORS Middleware. Вручную всё это настраивать очень часто сложно и не нужно. Точно не на уровне серверного Nginx.

Comments

[df12]

site.com на Next.js
api на PHP

[Антон Неверов]

df12, в next.js или уже включён CORS, или так же существуют модули, которые его активируют. Поищите в интернете. Возможно, подойдёт тот же модуль от Express.

[df12]

Антон Неверов, API у меня на PHP (Lumen), нашёл решение своей проблемы https://stackoverflow.com/a/49832833/19924874. Спасибо за помощь!

Answer 2

[Александр Карабанов]

CORS on Nginx