reactjs - 授权应用程序调用 API Azure AD 时出现 CORS 错误？

Question

在 React 中通过 fetch() 调用 API 但出现 CORS 错误。 https://login.microsoftonline.com/tenant_id /oauth2/v2.0/authorize?client_id=xxxxxxxxxxxxxxxxxxxxx&response_type=code&redirect_uri=http://localhost:3050&scope=user.Read.All&response_mode=query

上面的 URL 是由 Postman 制作的，如果直接粘贴在浏览器上可以正常工作。

2.有没有办法安全地获取代码，即在正文中而不是在查询中获取响应代码？

尝试将 Allow-access-origin 的获取中的标头传递给 *.

标签： reactjsazure-active-directorymsalazure-ad-graph-apireact-aad-msal

Answer 1

我们需要在 react 中使用 msal来避免 CORS 问题。微软还提供了一些 react 应用的示例，你可以看这个文档。在这里我测试了这个示例代码。我还注册了一个 azure 广告应用程序并设置了重定向 url http://locahost:3000，这是我的配置：

在此处输入图像描述 在此处 输入图像描述

正如您在 App.jsx 中看到的那样，它使用下面的代码生成访问令牌并使用它调用图形 api，无需在浏览器中显示验证代码，因为令牌是静默获取的。我认为这可以满足您的要求。

function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        });
    }

========================更新==================

对于您的问题 2，我认为这可能会对您有所帮助：