title: 403 when making axios POST request
body: <p>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).</p>
  <p>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.</p>
  <p>i.e. 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.</p>
  <p>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.</p>
  <p>Notes:</p>
  <ul>
  <li><p>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 <code>if resp.status === 403, window.location.reload</code>. That fixed the problem, but I've wondered if the issue I'm experiencing now is related to it and &quot;leaking through&quot;, so to speak.</p>
  </li>
  <li><p><code>webpack-internal</code> shows up in the console (see screenshots), but searching for 403 errors with webpack comes up short.</p>
  </li>
  <li><p>I'm using <code>empty()</code> throughout the project, so that the old data doesn't remain on the page.</p>
  </li>
  </ul>
  <hr />
  <pre class="lang-js prettyprint-override"><code>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`,{
          &quot;query&quot;: {&quot;__metadata&quot;: {&quot;type&quot;:&quot;SP.CamlQuery&quot;}, &quot;ViewXml&quot;: `&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name='MiddleEarthMaps'/&gt;&lt;Value Type='TaxonomyFieldType'&gt;${location}&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;`}
          }, {
              method: &quot;POST&quot;,
              credentials: &quot;include&quot;,
              mode: &quot;no-cors&quot;,
              headers: {
                  &quot;Accept&quot;: &quot;application/json;odata=verbose&quot;,
                  &quot;Content-Type&quot;: &quot;application/json;odata=verbose&quot;,
                  &quot;X-RequestDigest&quot;: $(&quot;#__REQUESTDIGEST&quot;).val()
              }
      }).then(resp =&gt; {
          console.log(resp.status)
          // in here there's other code that behaves as intended (95% of the time)
      }).catch(err =&gt; {
          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(&quot;Error during loadMaps&quot;);
          console.log(err);
          return false;
       });
      return ret;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/uVlPk.png" rel="nofollow noreferrer">403 in the console</a></p>
  <p><a href="https://i.stack.imgur.com/iQk59.jpg" rel="nofollow noreferrer">The debugger</a></p>
  <p><a href="https://i.stack.imgur.com/AzNvQ.jpg" rel="nofollow noreferrer">Local in the debugger</a></p>