Why am I receiving a cross-origin error when using the react-stormpath LoginForm component?

时光毁灭记忆、已成空白 提交于 2019-12-25 09:26:28

问题


I followed the instructions found in the readme in the stormapth-sdk-react github respository to set up a basic login form. The form displays, but I am immediately greeted by errors in the console:

XMLHttpRequest cannot load https://{redacted}.apps.stormpath.io/me. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.

I get an identical error for the login endpoint.

The Client API Guide indicates that client endpoints have to be configured to allow traffic from a particular domain, but does not provide any instructions for how to do this:

Applications that use the Client API have two relevant configuration parameters, both found on your Application’s page in the Stormpath Admin Console:...

  1. Authorized Callback URIs: This list should include any URIs that your users will be returned to after they have completed authentication with an outside provider, for example as a part of the social login flow. For example, if you do not specify a redirect URI when you kick off the social login flow, the user will be redirected the first URI in this list.
  2. Authorized Origin URIs: This list should include the application’s URL, or whatever URL will be included in the Origin header of requests sent to the Client API.

What do I need to do to get this working?


回答1:


To fix this, you can login to https://api.stormpath.com, navigate to Applications > My Application, and modify the Authorized Origin URIs to include http://localhost:3000.




回答2:


Stormpath seems to use a pretty similar setup to many API services. Like the directions say, go to your Stormpath Admin Console, and put your hostname (http://localhost:3000) in the relevant fields for both 1. and 2.

Doing so tells the Stormpath API to allow data to be sent to your application.




回答3:


The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers.

As the server you are using (for react) differs from the server you are requesting data(node or something else). (even the subdomain or port matters)

index.js: (server)

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

for more info about using cors: npm cors



来源:https://stackoverflow.com/questions/41994231/why-am-i-receiving-a-cross-origin-error-when-using-the-react-stormpath-loginform

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!