How do I get react-stormpath to add Access-Control-Allow-Origin headers?

I'm having a similar problem to:

401 Error with post request Stormpath Express + React + Node + Gulp

Specifically, when I try to use the LoginForm or RegisterForm from react-stormpath, I get:

XMLHttpRequest cannot load https://api.stormpath.com/v1/applications/[ID]/oauth/token. Response to preflight request doesn't pass access control check: 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 401.

I have added http://localhost:3000 to the Authorized Origin URIs in the Stormpath console, but that doesn't help. I've inspected the request using Chrome, and indeed, there is no ACAO header coming back.

Unlike the other issue linked to above, I'm not doing anything custom. My login page just looks like this:

import React from 'react';
import { LoginForm } from 'react-stormpath';

export default class Login extends React.Component {
  render() {
    return (
      <LoginForm />
    );
  }
}

I don't even know how to debug this issue because I don't know what's going on under the hood in react-stormpath.

Edit: Adding the react-stormpath config:

ReactStormpath.init({
  endpoints: {
    baseUri: 'https://api.stormpath.com/v1/applications/[ID]'
  }
});

Solution

The problem is in your ReactStormpath.init. Your React app can't connect to api.stormpath.com directly, because that requires using a secure API key. Your baseUri should instead be one of:

Your Stormpath application's Client API URL, like https://foo-bar.apps.stormpath.io. This is a separate API domain that allows untrusted clients (like React) to connect. This part of the documentation is a better example.
Your web server, like http://localhost:3000 - if you are using something like express-stormpath (I can't quite tell from your question)

Disclaimer: I work at Stormpath.