如何让 react-stormpath 添加 Access-Control-Allow-Origin headers？

Question

我遇到了类似的问题：

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

具体来说，当我尝试使用 react-stormpath 中的 LoginForm 或 RegisterForm 时，我得到：

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.

我已将 http://localhost:3000 添加到 Stormpath 控制台中的授权来源 URI，但这没有帮助。我已经使用 Chrome 检查了请求，事实上，没有 ACAO header 回来。

与上面链接的其他问题不同，我没有做任何自定义的事情。我的登录页面如下所示：

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

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

我什至不知道如何调试这个问题，因为我不知道 react-stormpath 中发生了什么。

编辑：添加 react-stormpath 配置：

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

Answer 1

问题出在您的 ReactStormpath.init 上。您的 React 应用无法直接连接到 api.stormpath.com，因为这需要使用安全的 API 密钥。您的 baseUri 应该是以下之一：

您的 Stormpath 应用程序的客户端 API URL，喜欢 https://foo-bar.apps.stormpath.io。这是一个单独的 API 域，允许不受信任的客户端（如 React）进行连接。 This part 的文档是一个更好的例子。
您的 Web 服务器，例如 http://localhost:3000 - 如果您使用的是 express-stormpath（我无法从您的问题中完全判断）

免责声明：我在 Stormpath 工作。

如何让 react-stormpath 添加 Access-Control-Allow-Origin headers？

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

reactjs

stormpath