授权应用程序调用API Azure AD时发生CORS错误？

Question

在React中通过fetch（）调用API，但得到CORS错误。https://login.microsoftonline.com/tanent_id/oauth2/v2.0/authorize？client_id=xxxxxxxxxxxxxxxxxxxxxxx&response_type=code&redirect_uri=http://localhost:3050&scope=user.read.all&response_mode=query

上面的URL已经从邮差和工作良好，如果直接粘贴在浏览器。

尝试将允许访问起源的fetch中的头传递给*。

Answer 1

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

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

正如您在app.jsx中看到的，它使用下面的代码生成访问令牌并用它调用graph 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，我想这可能会对你有所帮助：