CORS bei file:// *fluch*

[Rolf B]

Hallo Ingrid,

führe ich meine Probierseite von localhost aus, bekomme ich den Inhalt meiner Textdatei. Egal ob mode:no-cors oder nicht, egal ob Chrome (75) oder Firefox (69). Läuft unter Windows 10.

Über file:// geht's nicht, mit Unterschieden im Verhalten bei Chrome und FF. Aber vielleicht mache ich ja was falsch?

Chrome:

Führe ich sie via file:// aus, läuft fetch in beiden Fällen ins catch. Im Error-Objekt steht "Failed to fetch", im Stacktrace zusätzlich noch TypeError.

In der Console erscheint noch:

Ohne no-cors:
Fetch API cannot load file:///D:/temp/php/fetch/test.txt. URL scheme must be "http" or "https" for CORS request.

Mit no-cors:
Fetch API cannot load file:///D:/temp/php/fetch/test.txt. URL scheme "file" is not supported.

Firefox:

Führe ich sie via file:// aus, läuft der cors-fetch ins catch. Im Error-Objekt steht "TypeError: NetworkError when attempting to fetch resource.", in der Konsole steht noch Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf file:///D:/temp/php/fetch/test.txt. (Grund: CORS-Anfrage war nicht http).

Der no-cors Fetch gelingt - gewissermaßen. Er liefert eine response mit body=null und type="opaque".

Testseite (Auszug):

<button id="corsfetcher">Fetch with cors</button>
<button id="nocorsfetcher">Fetch with no-cors</button>
<div id="fetched">
<script>
document.getElementById("corsfetcher").addEventListener("click", fetchCors);
document.getElementById("nocorsfetcher").addEventListener("click", fetchNoCors);
let fetched = document.getElementById("fetched");
   
function fetchCors() {
   handleFetch(fetch("test.txt"));
}

function fetchNoCors() {
   handleFetch(fetch("test.txt", { mode: "no-cors" }));
}

function handleFetch(promise) {
   promise
   .then(
      response => response.text()
   )
   .then(
      text => fetched.textContent = text 
   )
   .catch(
      err => fetched.textContent = err
   )
}
</script>

Rolf