React-Adal возвращает 401 с запросом POST, но 200 с запросом GET

Question

Я пытаюсь отправить запрос POST к API, который размещен в Azure и проходит проверку подлинности через Azure Active Directory.Я использую React с React-Adal для отправки моих запросов.Я настроил реактив-адал, используя репозиторий GitHub и этот учебник , чтобы направлять меня.

adalConfig.js

import { AuthenticationContext, adalFetch, withAdalLogin, adalGetToken } from 'react-adal';

export const adalConfig = {
    tenant: 'ad5842d4-1111-1111-1111-111111111111',
    clientId: '1f89aa20-1111-1111-1111-111111111111', //ClientID of the ReactClient application
    endpoints: {
        demoApi: 'e7926712-1111-1111-1111-111111111111', //ClientID of the DemoApi
        microsoftGraphApi: 'https://graph.microsoft.com'
    },
    postLogoutRedirectUri: window.location.origin,
    redirectUri: 'https://localhost:44394/',
    cacheLocation: 'sessionStorage'
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalDemoApiFetch = (fetch, url, options) =>
    adalFetch(authContext, adalConfig.endpoints.demoApi, fetch, url, options);

export const adalTokenFetch = () =>
    adalGetToken(authContext, adalConfig.endpoints.demoApi);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints);

Когда я используюadalDemoApiFetch с GET-запросом работает нормально и возвращает 200 со списком расписаний.

const url = `https://localhost:44322/api/Schedules/GetAllSchedules`;

        const response = await adalDemoApiFetch(axios.get, url);
        console.log(response);

        const schedules = response.data;

Когда я использую тот же adalDemoApiFetch с POST для добавления нового расписания в список, он возвращает 401.

const url = `https://localhost:44322/api/Schedules/AddSchedule`;

        const azureADID = authContext.getCachedUser();
        const token = authContext.acquireToken("e7926712-1111-1111-1111-111111111111");
        console.log(token);

        const options = {
            beginningDateTime: this.state.begDateTime.toJSON(),
            endindDateTime: this.state.endDateTime.toJSON(),
            userID: this.state.userID,
            azureADID: azureADID.profile.oid
        };

        const response = await adalDemoApiFetch(axios.post, url, options);
        console.log(response);

Я также попытался скопировать токен и использовать его в Postman для выполнения вызова, и он все еще возвращает 401. Когда я использую токен, который возвращается из функции ниже, он работает просто отлично.

export const adalTokenFetch = () =>
    adalGetToken(authContext, adalConfig.endpoints.demoApi);

Я использую axios, чтобы вызвать его в приведенном ниже коде, и он прекрасно работает.

const url = `https://localhost:44322/api/Schedules/AddSchedule`;

        const azureADID = authContext.getCachedUser();
        const token = await adalTokenFetch();
        console.log(token);

        const options = {
            beginningDateTime: this.state.begDateTime.toJSON(),
            endindDateTime: this.state.endDateTime.toJSON(),
            userID: this.state.userID,
            azureADID: azureADID.profile.oid
        };

        const response = await axios.post(url,
            {
                data: options
            },
            {
                headers: {
                    "Authorization": `Bearer ${token}`
                }
            }
        );

        console.log(response);

Что я делаю не так?Почему он будет работать с запросом GET, а не с запросом POST?Я что-то упустил?

Answer 1

Я тоже пытался работать с Axios.Кажется, что используя axios, он не может авторизовать токен на предъявителя.Попробуйте использовать Adalfetch, который решил проблему для меня.