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
--
sumpsi - posui - clusi
Felix Riesterer
Rolf B
JürgenB
TS
Der Martin