尝试使用 Auth0 对用户进行身份验证时出现 CORS 错误

Question

编辑

\n

可复制的仓库在这里

\n

我知道这些信用信息永远不应该出现在互联网上，但我在这里感到绝望+无论如何我都会在之后删除客户/租户。

\n

---

\n

我设置了一条路线：

\n

router.get(\'/login\', cors, async (req, res) => {\n    try {\n        console.log(\'Entered\')\n        await auth0.handleLogin(req, res)\n    } catch (err) {\n        return res.status(500).end()\n})\n

\n

线路Entered被打印出来，但是我不断发现 cors 错误，

\n

Access to XMLHttpRequest at \'https://dev-..\' (redirected from \'http://localhost:3000/login\')\n from origin \'http://localhost:3000\' has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the requested resource.\n

\n

我已经把头发拉了好几个 h\xcc\xb6o\xcc\xb6u\xcc\xb6r\xcc\xb6s\xcc\xb6 天了。

\n

我不确定为什么No \'Access-Control-Allow-Origin\' header is present on the requested resource会出现错误，因为我已经添加了cors包添加到我的自定义 Express 服务器中。

\n

我在这里做错了什么？我已经遵循了本教程passport-auth0，并且我已经遵循了这些文档（这是上面存储库中使用的包）——两种方法都显示相同的错误。

\n

在我的 Auth0 仪表板中，我已按如下方式设置允许的来源（即，我遵循以下操作：\n

\n

我不知道从这里该去哪里。如果我手动粘贴控制台错误中的 URL，https://dev-..那么它会将我带到身份验证页面并成功将我重定向到localhost:3000/.

\n

这里 are my init Auth0 settings.

\n

我在网上看到过一些类似的问题，比如这个, but creating a new client hasn\'t helped me, and the other answers haven\'t either. I\'ve crawled through nearly every relevant question on the Auth0 Community forum.

\n

我还克隆并运行了这里的示例，它可以与他们的页面 API 配合使用。我开始想，我不能使用这个nextjs-auth0 package with a custom server.

\n

Answer 1

您没有使用浏览器重定向，而是发送异步请求，这就是 Auth0 不适合您并给您带来 CORS 错误的原因。

使用以下代码更新您的主视图，它将解决您的问题：

import React from 'react';
import axios from 'axios';

export default function Home() {
    return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <a href='/login'>login</a>
        </div>
    );
}

PS：我通过分叉您的存储库尝试了此更改，它对我来说按预期工作，如果您仍然看到该问题，请告诉我。