CORS заблокировано происхождение - происхождение и разрешенное происхождение одинаковы

Использование dockerized Ory Kratos и Angular (папка www, размещенная через nginx, чтобы иметь возможность изменять заголовки) на локальном хосте и попытка выполнить

const headers = {
   Accept: 'application/json',
};
fetch('http://127.0.0.1:4433/self-service/registration/browser', {
  method: 'GET', 
  headers,
  redirect: 'follow',
  credentials: 'include',
})
.then((r) => console.log(r))
.catch((f) => console.log(f));

приводит к

Доступ для получения по адресу http://127.0.0.1:8100/auth/register?flow=b35c3f9a-5592-4121-80b9-87503c38e1d3 (перенаправлен с http://127.0.0.1:4433/self-service/registration / browser ') из источника' http://127.0.0.1:8100 'заблокирован политикой CORS: заголовок' Access-Control-Allow-Origin 'имеет значение' http://127.0.0.1:8100 ', которое не равно указанному происхождению. Попросите сервер отправить заголовок с допустимым значением или, если непрозрачный ответ соответствует вашим потребностям, установите режим запроса на 'no-cors', чтобы получить ресурс с отключенным CORS.

http://127.0.0.1:4433/self-service/registration/browser перенаправляет на http://127.0.0.1:8100/custompath/register?flow=%5Bsome-flow-id%5D через ответ HTTP 302. Браузер пытается разрешить перенаправление и выдает ошибку, упомянутую выше.

Происхождение и разрешенное происхождение совпадают - так как же может произойти эта ошибка? Я уже нашел этот ответ в stackoverflow: https://stackoverflow.com/a/62320912/14345380, если это полезно.

Версия Chrome 87.0.4280.88

Редактировать # 1 на вкладке "Сеть" можно увидеть здесь

Изменить № 2 Чтобы решить проблему самостоятельно, я создал небольшой репозиторий: найдите его здесь

Изменить №3. Спасибо за подсказку от pandamakes. Тестовое репо не работает на: 8100, а на 4200 (переключено с проекта ionic на проект angular).

Изменить №4. Я начал еще одно обсуждение происхождения проекта ory / kratos, здесь. Команда Ory реализовала SDK, который мы можем использовать вместо простых запросов на выборку.


person tmi    schedule 16.12.2020    source источник
comment
Но он перенаправлен через: 4433   -  person mplungjan    schedule 16.12.2020
comment
Я уже пытался разрешить: 4433, затем оба (: 8100 и: 4433), что не поддерживается.   -  person tmi    schedule 16.12.2020
comment
http://127.0.0.1:8100 возвращает правильный заголовок cors? (если возможно, показать вывод инструмента разработчика?)   -  person pandamakes    schedule 16.12.2020
comment
Адаптировал вопрос к вашим потребностям.   -  person tmi    schedule 16.12.2020
comment
а веб-интерфейс размещен на 127.0.0.1:8100?   -  person pandamakes    schedule 16.12.2020
comment
Мне также нужно будет перепроверить, но запрос origin: null выглядит подозрительным. Мне нужно будет посмотреть глубже   -  person pandamakes    schedule 16.12.2020
comment
Интерфейс размещается через контейнер докеров nginx на 127.0.0.1:8100. origin: null может быть из-за перенаправления?   -  person tmi    schedule 16.12.2020
comment
если порт не тот, то я считаю, что срабатывает CORS ... другими словами: different port = different origin, даже если хост такой же.   -  person JoSSte    schedule 16.12.2020
comment
Но даже порты такие же, как это видно в сообщении об ошибке выше. Также sequoia .makes.software / session-management-with-microservices / предполагает, что разные порты не запускают CORS.   -  person tmi    schedule 16.12.2020
comment
Я клонировал репо, но не смог найти ссылку на порт 8100. Я вижу, что nginx прослушивает 4200, а kratos работает на 4433? (править: судя только по docker-compose.yml)   -  person pandamakes    schedule 16.12.2020
comment
возможно, запрос CORS не может быть перенаправлен на другой хост: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/   -  person pandamakes    schedule 16.12.2020
comment
Поэтому извините. У меня было исходное репо, работающее с ionic, которое обслуживается на 8100. Angular обслуживается на 4200. Однако не должно иметь большого значения. В браузере вы можете (как вы уже выяснили, прочитав файл docker-compose) найти его здесь: localhost: 4200   -  person tmi    schedule 16.12.2020
comment
Я обновил свой вопрос в четвертый раз = ›Я думаю, что SDK намеревается достичь этого - так что я очень надеюсь, что это возможно.   -  person tmi    schedule 16.12.2020
comment
@tmi Я понимаю, что вы говорите о портах. Я что-то пробую, но пока, если у вас есть время, как бы безумно это ни звучало, попробуйте удалить github.com/TMInnovations/testorykratos/blob/main/docker/ (да, удалить заголовок cors) и дайте мне знать, как это происходит?   -  person pandamakes    schedule 16.12.2020
comment
Я использую только обратный прокси для добавления этого заголовка. Без него ошибка: доступ к XMLHttpRequest по адресу 'localhost: 4200 /? Flow = 031ec155-a18d-4719-a1b4-1cc78f9cba63 '(перенаправлено с' localhost: 4433 / самообслуживание / регистрация / браузер ') из источника' localhost: 4200 'заблокирован Политика CORS: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin.   -  person tmi    schedule 16.12.2020
comment
С '*' он не выдает ошибку: -O Но он также не доставляет cookie csrf_token.   -  person tmi    schedule 16.12.2020
comment
Я только что взглянул на ory.sh / kratos / docs / reference / api /, интересно, предназначена ли эта конечная точка для гиперссылки вашего приложения на URL-адрес, а не для использования выборки?   -  person pandamakes    schedule 16.12.2020
comment
Поскольку мое приложение должно быть SPA, я действительно не хочу перезагружать страницу. В настоящее время я использую (в своем проекте и минимальном репо) SDK, предоставленный ory / kratos (который, скорее всего, также использует fetch).   -  person tmi    schedule 16.12.2020
comment
у вас есть репо для ory / drato sdk? или просто использовать SDK? СПА - не моя сильная сторона. Я обычно использую паспортные данные или openid для аутентификации пользователя.   -  person pandamakes    schedule 16.12.2020
comment
Я не разработчик ory (к сожалению :-P). SDK можно найти здесь: npmjs.com/package/@oryd/kratos-client. И sdk создается автоматически, как вы можете прочитать здесь:   -  person tmi    schedule 16.12.2020


Ответы (2)


Одно дело - просто добавить в запрос no-cors.

mode: 'no-cors'

Кроме того, вы говорите, что у вас установлен заголовок Access-Control-Allow-Origin, вы также установили Access-Control-Allow-Credentials: true, поскольку вы выполняете выборку с помощью credentials: "include".

Наконец, установка учетных данных: include origin не может быть localhost или 127.0.0.1, иначе он вернет false и вызовет ошибку cors, поэтому либо установите учетные данные на тот же сайт, либо опустите или получите имя домена.

person norcal johnny    schedule 16.12.2020
comment
Спасибо за ответ. no-cors доставляет непрозрачный ответ, что не удовлетворяет запрос на регистрацию, который должен отвечать flowid (см. здесь rest-api doc: ory.sh/kratos/docs/reference/). Пытался добавить заголовок Access-Control-Allow-Credentials: true, но это не дало никакого эффекта. Установка учетных данных на одно и то же происхождение не имеет никакого эффекта. То же сообщение об ошибке, такое же для пропуска. Поэтому я думаю, что это не связано с заголовком учетных данных. То же самое происходит, если заголовок учетных данных не корректируется в блоке заголовка. - person tmi; 16.12.2020
comment
У меня уже есть домен. Но я хочу, чтобы я и другие разработчики могли работать на localhost. Если нет другого решения, возможно, мы перейдем к онлайн-разработке (не очень круто). - person tmi; 16.12.2020

Я ... думаю, я понял ...

Перенаправление 302 работает, но когда запросы на выборку следуют за перенаправлением, теперь оно пытается получить не-cors ресурс. В этом случае он не будет прикреплять заголовок запроса Origin (поскольку это не CORS запрос).

Когда приходит ответ, браузер сравнивает заголовок access-control-allow-origin, если таковой существует, с источником запроса. Если заголовок ответа существует, а не *, он должен соответствовать origin заголовку запроса.

Итак, решите свою проблему, вы захотите удалить access-control-allow-origin в настройках nginx или установить для него значение *

min repro: https://github.com/xgui3783/cors-min-repro

person pandamakes    schedule 16.12.2020
comment
Спасибо! Пропуск его в репозитории tmy не сработал, но установка его на * позволила ему не выдавать ошибку. Однако cookie csrf_token при этом не доставляется. Также, как я вижу, flow_id нельзя получить из ответа. В вашем репо я не вижу установленных файлов cookie. Итак: Да, это работает, но я не могу прояснить это с помощью файлов cookie (которые необходимы для процесса регистрации на ory / kratos). - person tmi; 16.12.2020