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

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

---

我设置了一条路线：

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

输入的

行

被打印出来，但是我一直捕捉到一个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.

我已经拔头发好几天了

由于我已将

cors

包添加到我的自定义Express服务器，我不确定请求的资源上出现错误

No'Access Control Allow Origin'标头的原因

我做错了什么？我遵循了使用
passport-auth0
的方法，也遵循了这些方法（这是上面存储库中使用的包）——两种方法都显示了相同的错误

在我的Auth0仪表板中，我设置了允许的来源，如下所示（即，我遵循：

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

是我的init Auth0设置

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

我还克隆并运行了这个示例，它与他们的pages API一起工作。我开始想，我不能将这个
nextjs-auth0
包与自定义服务器一起使用。
而不是使用浏览器重定向，您发送的是异步请求，这就是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>
    );
}

从“React”导入React；
从“axios”导入axios；
导出默认函数Home（）{
返回(
);
}

附言：我尝试通过分叉回购进行此更改，它对我的效果与预期一样，如果您仍然看到问题，请告诉我。
因为您正在将前端请求重定向到该
https://dev-..
URL，并且从该URL返回响应，仅启用CORS是不够的
http://localhost:3000
se仅限服务器。相反，该
https://dev-..
服务器也必须启用CORS。显然它不是。如果它是OAuth端点，则它是正常的，并且预期它没有启用CORS。这是因为OAuth端点并不意味着通过XHR或Fetch或其他方式接收脚本ajax请求。相反，用户应该是导航到端点，然后再导航回来。您无法使用XHR导航用户。我深入挖掘，了解您的意思。但是，正如我在问题中所示，我已经设置了
http://localhost:3000
允许的原产地（CORS）并且允许Web源。正如我所说，我不确定从哪里开始我以前没有在Next.js上尝试过这种方法，但是auth0与其他几个js框架一起工作时没有太多问题。我想，如何重定向到auth0登录页面是一个问题。基本上，它不应该发出COR请求登录时，它应该将整个浏览器发送到auth0域进行登录，然后将客户端连同令牌一起发送回来。我克隆了您的repo，奇怪的是handleLogin方法没有将302返回到浏览器。真正困扰我的是，我已经查看了它们，自己克隆了它们，并让它们返回轻松工作。我能注意到的唯一区别是，我使用的是自定义服务器来处理登录，而他们使用的是他们的pages API。这个例子也很奇怪，因为它也使用自定义服务器，但如果我看得对的话，它不做任何身份验证，只做授权。不知道从哪里开始。我认为issue将位于“处理登录的自定义服务器”中的某个位置。第二个示例是资源服务器-这是一个使用访问令牌允许authn/z访问API的后端。问题是如何获取令牌-您的UI需要执行302重定向到auth0登录页面（不使用XHR），允许auth0处理所有登录过程（可以包括注册、2fa等）然后，它会使用一个令牌重定向回你的应用程序。我只想确认，我在后端的任何路由，在本例中是
/login
，都可以通过简单的“标记”访问？这是nextjs吗？我不记得ReactJS与Express后端的行为方式相同。不是真的，它不是nextjs，而是OAuth impl的一部分我猜是icit授权规范。根据经验，所有请求都会导致重定向响应（响应中的位置头）应该直接通过浏览器进行。即使您可以像以前一样保持处理程序，但不调用端点异步，您也必须调用window.location=newUrl。解决此问题肯定有很多方法，但这是最简单的方法。您可以在axios上遵循此线程，如果不是现在，可能会找到您想要的答案可能在将来的某个时候：