Почему я получаю ошибку при перекрестном происхождении при использовании компонента InputFormpath для входа в систему?

Question

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

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

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

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

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

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

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

Answer 1

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

Answer 2

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

Выполнение этого действия сообщает API Stormpath, чтобы данные могли быть отправлены в ваше приложение.

Answer 3

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

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

индекс.ЯШИ: (сервер)

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

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