尝试在 Next.js 中使用授权代码授予获取身份验证令牌时如何解决 Cors 错误

Question

我有一个应用程序，我试图发送生成的 pdf 以获取签名。非常简单。 我在邮递员中进行了身份验证，但是当我在代码中尝试它时，出现此错误：

从源“http://localhost:3000”获取“https://account-d.docusign.com/oauth/token”的访问已被 CORS 策略阻止：无“Access-Control-Allow-Origin”标头存在于所请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我可以用这个检索 oauth 代码：

  if (router.asPath !== router.route) {
      setOAuthCode(new URLSearchParams(window.location.search).get("code"));
    }

但是在单独的使用效果中，我尝试提交此oAuth代码，它崩溃了：

useEffect(() => {
    const getAuthToken = async () => {


      const tokenUrl = "https://account-d.docusign.com/oauth/token";
      const encodedSecret = btoa(
        `${process.env.NEXT_PUBLIC_DOCUSIGN_INTEGRATION_KEY}:${process.env.NEXT_PUBLIC_DOCUSIGN_CLIENT_SECRET}`
      );

      const headers = {
        "Authorization": `Basic ${encodedSecret}`,
        "Content-Type": "application/x-www-form-urlencoded",
      };
      const body = new URLSearchParams({
        grant_type: "authorization_code",
        code: oAuthCode,
      });

      const response = await fetch(tokenUrl, {
        method: "POST",
        headers: headers,
        body: body,
      });

      if (!response.ok) {
        throw new Error(
          `Failed to get access token: ${response.status} ${response.statusText}`
        );
      }
      const data = await response.json();
      setAuthToken(data.access_token);
    };
    getAuthToken();
  }, [oAuthCode]);

任何功夫都会被接受

Answer 1

目前（2024 年 7 月），您无法将身份验证代码授予与 CORS 一起用于 Docusign。您必须使用隐式授予，这意味着您必须返回“应用程序和密钥”页面并更改 IK（集成密钥或 clientID）的配置方式。 使用隐式授权，您根本不需要进行此 API 调用。

找到您的 IK 并将此“是/否”问题更改为“否”。因为您无法使用 CORS 在客户端上存储秘密：