授权应用程序调用 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 的获取中的标头传递给 *。

Answer 1

我们需要 use msal 做出反应以避免 CORS 问题。微软还提供了一些 react 应用的示例，可以看this document。在这里我测试了this sample code。我还注册了一个 azure ad 应用程序并设置了重定向 url http://locahost:3000，这是我的配置：

enter image description here enter image description here

正如您在 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，我认为this may help you：