Question

我正在尝试在我的NodeJS + React App中实现Auth0。虽然我有一个很大的问题，但本教程非常有用且有用。每当我尝试通过Auth0登录/注册时，我都会

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

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

祝你好运

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

我在本地开发时应该放在哪里？我的IP？

Answer 1

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

http://localhost:4000/callback

在该领域。

Answer 2

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

Answer 3

由于您提到要构建node.js应用程序，因此只需在服务器端进行详细说明。我想你也在用快递。要处理CORS请求，您可以执行以下操作：

在您的快速服务器文件中，您可以将本地主机设置为客户端React应用以外的其他方式，该应用很可能在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"
}

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

希望这会有所帮助。

Auth0和React的CORS问题

3 个答案: