403 when making axios POST request

Question

I have a feature that loads a map onto a page, and 5% of the time I'm hit with a 403 error and the map data doesn't load properly. I've had a very difficult time with triggering the error, but I was able to catch it and take screenshots (see below).

When the page refreshes, a GET request occurs that loads the right data, and then a POST request occurs that loads the right map. There are multiple pages, each with their own content and maps, and a user can easily navigate between pages.

ie When the Mordor page loads, the data for the Mordor map loads simultaneously. When I navigate to the Lothlorien page, the data for the Lothlorien map loads.

Any thoughts on what's causing this? As I said, although this error happens rarely I do want to get to the bottom of it, in order to prevent future complications down the line.

Notes:

• I used to have an issue to where the 403 error happened frequently (if the page was idle), but I resolved it by doing a if resp.status === 403, window.location.reload . That fixed the problem, but I've wondered if the issue I'm experiencing now is related to it and "leaking through", so to speak.

• webpack-internal shows up in the console (see screenshots), but searching for 403 errors with webpack comes up short.

• I'm using empty() throughout the project, so that the old data doesn't remain on the page.

---

async function loadMaps(){
    let ret = axios.post( // ${location} is referenced at an earlier point, and always works
        `${_Something}/something/_api/web/lists/getbytitle('Middle Earth Maps')/GetItems`,{
        "query": {"__metadata": {"type":"SP.CamlQuery"}, "ViewXml": `<View><Query><Where><Eq><FieldRef Name='MiddleEarthMaps'/><Value Type='TaxonomyFieldType'>${location}</Value></Eq></Where></Query></View>`}
        }, {
            method: "POST",
            credentials: "include",
            mode: "no-cors",
            headers: {
                "Accept": "application/json;odata=verbose",
                "Content-Type": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            }
    }).then(resp => {
        console.log(resp.status)
        // in here there's other code that behaves as intended (95% of the time)
    }).catch(err => {
        if (err.status === 401 || err.status === 403) { // I use this for the main page of the project, and it works as intended
            window.location.reload();
        }

        console.log("Error during loadMaps");
        console.log(err);
        return false;
     });
    return ret;
}

403 in the console

The debugger

Local in the debugger

Answer 1

I don't have enough reputation to comment, so I'll put my two cents below:

• According to MDN Web Docs :

The HTTP 403 Forbidden client error status response code indicates that the server understood the request but refuses to authorize it.

If the requests are consistent, but responses are not, chances are error comes from server.

It might be reasonable to consult the server documentation or contact maintainer directly. Maybe check if the server is rate-limiting your request, or the server is unstable. If the problem persists, report the bug to maintainer.