Why am I receiving a cross-origin error when using

Question

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?

Answer 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.

Answer 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.

Answer 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