发出 axios POST 请求时出现 403

如何解决发出 axios POST 请求时出现 403

我有一个功能可以将地图加载到页面上，并且有 5% 的时间遇到​​ 403 错误并且地图数据无法正确加载。我在触发错误方面遇到了非常困难的时间，但我能够捕捉到它并截取屏幕截图（见下文）。

当页面刷新时，会发生加载正确数据的 GET 请求，然后发生加载正确地图的 POST 请求。有多个页面，每个页面都有自己的内容和地图，用户可以轻松地在页面之间导航。

即当 Mordor 页面加载时，Mordor 地图的数据会同时加载。当我导航到 Lothlorien 页面时，会加载 Lothlorien 地图的数据。

对导致这种情况的原因有任何想法吗？正如我所说，虽然这个错误很少发生，但我确实想深入了解它，以防止未来出现并发症。

注意事项：

• 我曾经遇到过经常发生 403 错误的问题（如果页面空闲），但我通过执行 if resp.status === 403,window.location.reload 解决了这个问题。这解决了问题，但我想知道我现在遇到的问题是否与它有关并且可以说是“泄漏”。

• webpack-internal 显示在控制台中（参见屏幕截图），但使用 webpack 搜索 403 错误却很短。

• 我在整个项目中都使用了 empty()，这样旧数据就不会保留在页面上。

---

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

解决方法

我没有足够的声誉来发表评论，所以我会把我的两分钱放在下面：

• 根据MDN Web Docs：

HTTP 403 Forbidden 客户端错误状态响应代码表示服务器理解请求但拒绝授权。

如果请求一致，但响应不一致，则错误很可能来自服务器。

查阅服务器文档或直接联系维护者可能是合理的。 也许检查服务器是否正在限制您的请求，或者服务器是否不稳定。如果问题仍然存在，请向维护者报告错误。