Auth0 和 React 的 CORS 问题

Posted 2023-03-04

【中文标题】Auth0 和 React 的 CORS 问题

【英文标题】：CORS problems with Auth0 and React

【发布时间】：2016-04-02 09:47:03

【问题描述】：

我目前正在尝试在我的 NodeJS + React 应用程序中实现 Auth0。 给出的这个教程真的很好而且很有帮助，虽然我有一个大问题。 每次我尝试通过 Auth0 登录/注册时，我都会得到 ​​p>

XMLHttpRequest 无法加载 https://XYZ.eu.auth0.com/usernamepassword/login。对预检的响应 请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:3000” 使用权。对预检请求的响应未通过访问控制 检查：没有“Access-Control-Allow-Origin”标头出现在 请求的资源。原点 'http://localhost:3000' 因此不是 允许访问。

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

最好的问候

---

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

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

【参考方案1】：

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

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

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

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

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

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

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

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

希望这会有所帮助。

【参考方案2】：

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

http://localhost:4000/callback

在那个领域。

【参考方案3】：

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