Почему мой SPA, который вызывает мой WebAPI с помощью Azure Active Directory, получает сообщение «В этом запросе отказано в авторизации»?

Question

У меня есть локальный клиент SPA (на основе https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa)

Затем есть служба WebAPI. (На основе https://github.com/Azure-Samples/active-directory-dotnet-native-desktop)

Служба должна отвечать только аутентифицированным и авторизованным клиентамС этой целью я использую активный каталог Azure (AD).

Здесь показано, как связаны 3 части. Номера относятся к порядку вызовов.

Хотя Azure AD, похоже, возвращает клиенту токен доступа, и клиент отправляет токен доступа к службе в заголовке, служба отвечает

Authorization has been denied for this request

Вопрос Почему это происходит? У меня такое ощущение, что моя локально работающая служба почему-то «не разговаривает с Azure AD».

Подробности

И клиент, и служба являются «регистрациями приложений» в Azure AD.

Служба предоставляет API.

В конфигурации сервиса есть «арендатор» и «аудитория»«Похоже, слишком мало конфигурации.

Клиент имеет разрешения API.

В конфигурации клиента есть идентификатор регистрации клиентского приложения.

Клиент, по сути, состоит из кнопки для входа и кнопки для получения списка задач из API.Ниже приведен снимок экрана клиента и инструментов разработчика Firefox со страницей входа.

Когда клиент запускается, мне сначала нужно пройти аутентификацию с помощью AzureОБЪЯВЛЕНИЕ.Клиент получает токен доступа.Ниже ответ.

Когда я нажимаю «Get Todos», служба вызывается с токеном доступа, но ответ 401.

Код для получения списка задач

function getTodos() {

    myMSALObj.acquireTokenPopup(requestObj).then(function (tokenResponse) {

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log("success");                 
            } else {
                console.log("failure");
            }
        }
        const apiUrl = "https://localhost:44321/api/todolist";
        xmlHttp.open("GET", apiUrl, true); // true for asynchronous

        //No, the API sends back this header (to indicate that cross origin requests are allowed). xmlHttp.setRequestHeader('Access-Control-Allow-Origin', 'Bearer ' + tokenResponse.accessToken);

        xmlHttp.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.accessToken);
        xmlHttp.send();

    }).catch(function (error) {
        console.log(error);
    });

}