Auth0 和 React 的 CORS 问题

Question

我目前正在尝试在我的 NodeJS + React 应用程序中实施 Auth0。给出的本教程非常好并且很有帮助，尽管我有一个大问题。每次我尝试通过 Auth0 login/register 我得到

XMLHttpRequest cannot load https://XYZ.eu.auth0.com/usernamepassword/login. 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. 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.

所以我大致了解了这意味着什么。但我只是不知道在哪里设置所需的选项以允许对 Auth0 的请求。在服务器端？在浏览器代码中？

此致

编辑：正如 Rodrigo López Dato 指出的那样，我可以在我的应用程序中编写 Origins：https://manage.auth0.com/#/applications

本地开发应该放什么？我的 IP?

Answer 1

Auth0 需要知道您的应用程序允许的来源和回调 URL。您可以在仪表板的应用程序设置中进行配置：https://manage.auth0.com/#/applications

Answer 2

如果你在本地开发，你可以把你要重定向到的URL。例如，如果您运行在本地主机的端口 4000 上，并且您想重定向到名为 /callback 的路由，您可以输入：

http://localhost:4000/callback

在那个领域。

Answer 3

因为您提到您正在构建一个 node.js 应用程序，所以只是在服务器端详细说明。我假设你也在使用快递。要处理 CORS 请求，您可以执行以下操作：

在您的快速服务器文件中，您可以将本地主机设置为客户端 React 应用程序以外的其他内容，这很可能是运行ning on localhost:3000。

var port = normalizePort(process.env.PORT || '5000');
app.set('port', port);

然后安装 cors npm 包并在你的主 express 文件中初始化它。

var app = express();
app.use(cors());

然后你所要做的就是在你的客户端 React package.json 文件中设置一个代理。

  },
  "proxy": "http://localhost:5000"
}

然后您可以运行您的节点。js/express 服务器和 React 应用程序同时使用，并使用您的快速服务器通过客户端 React 与代理发出请求。

希望这对您有所帮助。

Auth0 和 React 的 CORS 问题

CORS problems with Auth0 and React

node.js

cors

reactjs

auth0