尝试从 oauth/token 端点 Auth0 请求 access_token 时出现 CORS 错误

Question

在我使用“/authorize”端点授权我的用户之后，我需要用户获得 access_token 来访问我的 API。我目前正在尝试通过使用所有必需参数向“oauth/token”端点发出发布请求来在 Next.js 中执行此操作。

Next.js中的请求示例代码：

let tokenParams = {
    grant_type: "authorization_code",
    client_id: process.env.client_id,
    client_secret: process.env.client_secret,
    code: router.query.code,
    redirect_uri: process.env.base_url
  };

  useEffect(() => {
      fetch('https://neume.eu.auth0.com/oauth/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }, tokenParams)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
      })
    }, [])

然而，这个请求每次都返回一个 CORS 错误。

我尝试将 Auth0 的应用程序设置中的 Allowed Origins 设置为“http://localhost:3000”，但这似乎不起作用。当我在 Postman 中提出这个请求时，它工作得很好。我觉得我做的一切都是对的，但我不知道为什么它不起作用。

我希望有人能告诉我这里发生了什么，并为我提供一个可能的解决方案。

Answer 1

您尝试发出的请求是一个 OpenID Connect token 请求，它必须由您的 server 向 OAuth 授权服务器发出，而不是由浏览器（即，不是您的 React frontend）发出。只有你的服务器应该有

client_secret

，它不应该暴露给你的前端。

由于授权服务器期望令牌请求是由服务器而不是浏览器发出的，因此它不允许令牌端点使用 CORS 是有道理的。

本文档描述了如何使用各种服务器端编程语言进行令牌请求（他们称之为“代码交换请求”）。

Answer 2

fetch

（和

XMLHttpRequest

）是同源的（在服务器上），即请求文件需要与

.htm

文件在同一台服务器上。

fetch()方法由

内容安全策略

的connect-src指令控制，而不是它正在检索的资源的指令。

CORS 协议 处理这个问题。 “跨服务器”可以通过在

Access-Control-Allow-Origin

标头中指定它来允许加载其响应 - 客户端浏览器不能。

因此，

fetch

一个用您的服务器端语言编写的文件，并从那里访问 URL，例如使用 cURL。然后将响应返回给 AJAX 调用，就完成了。

在PHP中，一个例子是

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER,true);
curl_setopt($curl, CURLOPT_POST,true);
curl_setopt($curl, CURLOPT_POSTFIELDS,$pBody);
$result = curl_exec($curl);
curl_close($curl); 
echo $result;

其中

$pBody

包含

tokenParams

数据在

POST

查询格式。