title: Safari: "Fetch API cannot load due to access control checks" after reload
body: <p>I experience some odd behavior in the CORS system of Safari.
  I have a POST request which I send from the JS Fetch API like this:</p>
  <pre><code>const res = await fetch('http://localhost:8888/myPath', {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(body)
  });
  </code></pre>
  <p>According to the network monitor of Safari, the request header looks like this:</p>
  <pre><code>POST /myPath HTTP/1.1
  Accept: */*
  Content-Type: application/json
  Origin: http://my.domain.com
  Content-Length: 335
  Accept-Language: en-gb
  Host: localhost:8888
  User-Agent: Mozilla/5.0...
  Referer: http://my.domain.com
  Accept-Encoding: gzip, deflate
  Connection: keep-alive
  </code></pre>
  <p>and the following response comes from the server:</p>
  <pre><code>HTTP/1.1 200 OK
  Date: Tue, 28 Jul 2020 19:15:45 GMT
  Vary: Origin
  Content-Length: 4
  Content-Type: application/json
  Access-Control-Allow-Origin: http://my.domain.com
  Server: uvicorn
  </code></pre>
  <p>Unfortunately, I don't have Wireshark on this machine and Safari does not show the preflight requests. So I don't know if any preflight happens and how that looks like.</p>
  <p><strong>Now the problem is:</strong> when I have a fresh browser session (e.g. with private mode) and access my document which triggers the fetch request, everything works.
  Only after reloading the page to send the CORS request again, I get &quot;Fetch API cannot load due to access control checks&quot; in the Safari console.
  So I presume, it has something to do with how Safari caches CORS requests/preflights.</p>
  <p>In Firefox and Chrome, my CORS request works like a charm.</p>
  <p>How can I solve this?</p>