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

Question

编辑

我知道这些信誉永远不应该出现在互联网上，但我在这里变得绝望 + 我会在之后删除 client/tenant。

我设置了一条路线：

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.

我已经拔头发好几天h̶o̶u̶r̶s̶了。

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

我在这里做错了什么？我也遵循了 this tutorial which uses passport-auth0 and I've followed these docs（这是上面存储库中使用的包）——两种方法都显示相同的错误。

在我的 Auth0 控制面板中，我设置了如下允许的来源（即，我关注了 this：

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

Here 是我的初始 Auth0 设置。

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

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

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

P.S：我通过分叉你的回购尝试了这个改变，它对我来说按预期工作，如果你仍然看到这个问题，请告诉我。

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

Getting a CORS error when trying to authenticate user with Auth0

cors

auth0

next.js

编辑