Auth0 和 React 的 CORS 问题

IT技术 node.js reactjs cors auth0
2021-05-10 16:02:54

我目前正在尝试在我的 NodeJS + React App 中实现 Auth0。尽管我有一个大问题,但给出的本教程非常好且很有帮助。每次我尝试通过 Auth0 登录/注册时,我都会得到

XMLHttpRequest 无法加载 https://XYZ.eu.auth0.com/usernamepassword/login对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问Origin ' http://localhost:3000 '。对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问Origin ' http://localhost:3000 '。

所以我对这意味着什么有一个粗略的理解。但我只是不知道在哪里设置允许此请求到 Auth0 所需的选项。在服务器端?在浏览器代码中?

最好的祝福


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

当我在本地开发时,我应该在那里放什么?我的IP?

3个回答

如果您在本地开发,则可以放置要重定向到的 URL。例如,如果您在 localhost 的 4000 端口上运行,并且想要重定向到名为 的路由/callback,则可以输入:

http://localhost:4000/callback

在那个领域。

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

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

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

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"
}

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

希望这会有所帮助。