为什么在使用react stormpath LoginForm组件时收到跨原点错误

Question

我按照stormapth sdk react github repository中自述文件中的说明设置了一个基本的登录表单。该表单显示，但控制台中立即出现错误：

XMLHttpRequest无法加载https://｛redated｝.apps.stormpath.io/me。请求的资源上不存在"Access Control Allow Origin"标头。原点'http://localhost:3000因此不允许访问。响应的HTTP状态代码为403。

我在登录端点上得到了一个相同的错误。

《客户端API指南》指出，客户端端点必须配置为允许来自特定域的流量，但没有提供任何有关如何做到这一点的说明：

使用客户端API的应用程序有两个相关的配置参数，这两个参数都可以在Stormpath管理控制台中的应用程序页面上找到：。。。

1. 授权回调URIs:此列表应包括用户在完成与外部提供商的身份验证后将返回的任何URI，例如作为社交登录流的一部分。例如，如果在启动社交登录流时没有指定重定向URI，则用户将被重定向到此列表中的第一个URI
2. 授权的原始URI： 此列表应包括应用程序的URL，或发送到客户端API的请求的原始标头中包含的任何URL

我需要做什么才能让它正常工作？

Answer 1

要解决此问题，您可以登录https://api.stormpath.com，导航到"应用程序">"我的应用程序"，然后修改"授权来源URI">以包含http://localhost:3000。

Answer 2

Stormpath似乎使用了与许多API服务非常相似的设置。按照指示，转到您的Stormpath管理控制台，并输入您的主机名(http://localhost:3000)在两个1的相关字段中。和2。

这样做告诉Stormpath API允许将数据发送到您的应用程序。

Answer 3

跨来源资源共享(CORS)机制为web服务器提供跨域访问控制，从而实现安全的跨域数据传输。

因为您使用的服务器(用于react)与您请求数据的服务器(节点或其他东西)不同。(甚至子域或端口也很重要)

index.js:(服务器)

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

有关使用cors的更多信息：npm-cors-