Почему я получаю сообщение об ошибке перекрестного происхождения при использовании компонента LoginForm react-stormpath?

Я следовал инструкциям, приведенным в файле readme в stormapth-sdk-react github. репозиторий, чтобы настроить базовую форму входа. Форма отображается, но меня сразу же встречают ошибки в консоли:

XMLHttpRequest не может загрузить https://{redacted}.apps.stormpath.io/me. В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Таким образом, доступ к источнику 'http://localhost:3000' запрещен. В ответе был код состояния HTTP 403.

Я получаю идентичную ошибку для конечной точки входа.

В Руководстве по клиентскому API указано, что клиентские конечные точки должны быть настроен на разрешение трафика из определенного домена, но не дает никаких инструкций, как это сделать:

Приложения, использующие клиентский API, имеют два соответствующих параметра конфигурации, оба из которых находятся на странице вашего приложения в консоли администрирования Stormpath:...

  1. Авторизованные URI обратного вызова. В этот список должны быть включены все URI, на которые ваши пользователи будут возвращаться после завершения аутентификации у внешнего поставщика, например, в рамках процесса входа в социальную сеть. Например, если вы не укажете URI перенаправления при запуске процесса входа через социальную сеть, пользователь будет перенаправлен на первый URI в этом списке.
  2. Авторизованные URI Origin. Этот список должен включать URL-адрес приложения или любой другой URL-адрес, который будет включен в заголовок Origin запросов, отправляемых в Client API.

Что мне нужно сделать, чтобы это заработало?


reactjs stormpath
person Daniel Arant    schedule 02.02.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Чтобы исправить это, вы можете войти на https://api.stormpath.com и перейти в Приложения > Мое приложение. и измените URI авторизованного источника, включив в него http://localhost:3000.

person Matt Raible    schedule 02.02.2017
comment
Вчера вечером, в моих мутных попытках заставить работать, я полностью упустил из виду эту часть интерфейса конфигурации. Этот вопрос был больше о том, где именно можно найти URI авторизованного происхождения. - person Daniel Arant; 02.02.2017
comment
@DanielArant Поле «Авторизованные URI происхождения» по умолчанию ничем не заполнено. Вам нужно зайти в Applications -> Your Application -> Authorized Origin URI и добавить туда свой домен. - person mdegges; 07.02.2017
comment
Да, я понял это. Я просто не смог найти поле Authorized Origin URI. - person Daniel Arant; 07.02.2017

arrow_upward
0
arrow_downward

Stormpath, похоже, использует настройку, очень похожую на многие службы API. Следуя инструкциям, перейдите в консоль администратора Stormpath и введите имя своего хоста (http://localhost:3000) в соответствующие поля для 1. и 2.

Это говорит Stormpath API разрешить отправку данных в ваше приложение.

person Ezra Chang    schedule 02.02.2017
comment
Да, проблема была в том, что я не мог найти, куда добавить эту информацию. После составления этого вопроса я вернулся на свой портал администратора и почти сразу нашел его. Вот что я получаю за то, что поздно ложусь спать, чтобы решить проблему. - person Daniel Arant; 02.02.2017

arrow_upward
0
arrow_downward

Механизм Cross-Origin Resource Sharing (CORS) предоставляет веб-серверам элементы управления доступом между доменами, что обеспечивает безопасную передачу данных между доменами.

Поскольку сервер, который вы используете (для реагирования), отличается от сервера, данные которого вы запрашиваете (узел или что-то еще). (даже субдомен или порт имеют значение)

index.js: (сервер)

const cors = require('cors');
..
..
app.use(cors());

для получения дополнительной информации об использовании cors: npm cors

person Gnanesh    schedule 02.02.2017