Question

我试图将POST请求发送到Azure中托管的API，并通过Azure Active Directory进行身份验证。我正在使用带有React-Adal的React发送请求。我使用GitHub存储库和此tutorial配置了react-adal来指导我。

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;

当我在POST中使用相同的adalDemoApiFetch将新时间表添加到列表中时，它将返回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。

Answer 2

您需要告诉adalApiFetch您正在使用POST方法而不是GET。它默认为GET，这就是为什么ootb起作用的原因。使用选项对象。

React-Adal使用POST请求返回401，但是使用GET请求返回200

2 个答案: