Multiple API Requests Gives 401 Error

I’m trying to create an app that uses a REST API from Microsoft Azure to get information from a user’s Azure portal and display them on my Nextcloud app. When the app page loads, it makes two GET requests to Microsoft. However, while the first request goes through, the second one doesn’t. Instead, I get a 401 error stating that Authentication failed and that the Authorization header is missing, despite it using the same header as the first request.

Here’s the JavaScript that makes the API calls:

let sendRequest = (ev) => {

    let subscriptionURL = 'https://management.azure.com/subscriptions?api-version=2022-12-01';
    let token = sessionStorage.getItem('MyToken');
    let header = new Headers();
    header.append('Authorization', `Bearer ${token}`);

    let request = new Request(subscriptionURL, {
        method: 'GET',
        mode: 'cors',
        headers: header
    });

    function fetchSubscriptionID() {
        let subID;
        fetch(request)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                subID = data.value[0].id;
            })
            .catch(error => {
                console.error(error.message);
            });
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(subID);
                }, 2000);
        })
    }

    async function fetchVM() {
        const subscriptionID = await fetchSubscriptionID();
        sessionStorage.setItem('subID', subscriptionID);
        let VMInfo;

        let vmURL = 'https://management.azure.com'.concat(subscriptionID, '/providers/Microsoft.Compute/virtualMachines?api-version=2023-07-01');
        
        let vmRequest = new Request(vmURL, {
            method: 'GET',
            mode: 'cors',
            headers: header
        });

        console.log(vmRequest);

        fetch(vmRequest)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                VMInfo = data;
            })
            .catch(error => {
                console.log("Error message:")
                console.error(error.message);
            });

            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(VMInfo);
                    }, 2000);
            })
    }
}

It’s not an issue with the API, as I’m able to get the JavaScript to work fine on local API files, they just don’t work on my Nextcloud dev environment. I’ve also tried changing in what order I put the calls in to see if it was an issue with the specific request I’m making. However, any request is able to go through just fine if it’s the first call and all subsequent calls don’t work.

In case it will be useful in helping me, here’s the documentation of the API endpoints I am using:

This discussion was already partially worked on in the chat of the Nextcloud instance. This is just for reference and to explain why I am asking more specific.


Did you check if the second request to vmUrl if the credential header is passed along by the browser?

It might be fixed by Only add x-requested-with header in requests to Nextcloud by julien-nc · Pull Request #40471 · nextcloud/server · GitHub

What do you mean by the “credential heart”?

Sorry, I meant header. I edited the post.

The header isn’t passed along. Weird.
What could be the reason for this?

Honestly, I have no clue. My wild guess would be that the headers are no immutable object after they have been used once. Therefore, I asked you to check the object before the actual fetch.

Could it be the case that the header object is altered while you await the first calls?

I don’t think so. Checking the header before both calls shows that they’re both the same. I even tried making a new header just for the second call and it still doesn’t work.

Sorry, I am out on this right now. I do not see any obvious error and everything else would be plain guessing. Nothing structural.

If you have the code published somewhere, it might be a good idea to put the link here. I can try to give it a shot with the ladies Nextcloud to see if the suggested pr to the server did something good to the underlying issue.

You might want to ask the frontend team as well if there is someone able to help.

Sorry for my inability to help adequately.

Here’s the github repository for my code

I’ve been able to circumvent the issue, but it’s not the best solution. Since I’m only able to make one API call whenever the page loads, I save the info from the first API call in session storage and reload the page to make the second API call. I’ve added this as a separate branch, but I’d much rather find a more permanent solution.