Auth0和React的CORS问题

Question

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

XMLHttpRequest无法加载https://XYZ.eu.auth0.com/usernamepassword/login 。 对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此不允许来源' http：// localhost：3000 '访问。 对预检请求的响应未通过访问控制检查：请求的资源上不存在“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应用程序，并使用您的快速服务器通过客户端与代理进行React请求。

希望这会有所帮助。