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

Question

编辑

Reproducible repo here

我知道这些信誉不应该出现在互联网上，但我在这里变得绝望 + 无论如何我都会删除客户端/租户。

---

我设置了一条路线：

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

Entered 行被打印，但是我一直遇到一个 cors 错误，

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

我已经把头发拔了好几天了。

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

我在这里做错了什么？我关注了this tutorial，它使用了passport-auth0，我也关注了这些docs（这是上面存储库中使用的包）——两种方法都显示相同的错误。

在我的 Auth0 仪表板中，我已将允许的来源设置如下（即，我关注了this：

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

Here 是我的初始 Auth0 设置。

我在网上看到过一些类似的问题，比如this one，但是创建一个新客户对我没有帮助，其他答案也没有。我几乎浏览了 Auth0 社区论坛上的所有相关问题。

我还克隆并运行了示例 here，它与他们的页面 API 一起使用。我开始想，我不能将这个 nextjs-auth0 包与自定义服务器一起使用。

Answer 1

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

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

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>
    );
}

P.S：我通过 fork 你的 repo 尝试了这个更改，它按预期工作，如果你仍然看到问题，请告诉我。