fetch liefert leeren string

[Felix Riesterer]

Liebe Mitlesende,

ich möchte mit JavaScript den Quelltext einer Beispiel-Datei aus dem (Test-)Wiki laden. Der fetch-Aufruf scheint auch prinzipiell zu funktionieren, jedoch erhalte ich auf der Browser-Konsole immer <empty string>, anstelle des echten Textinhalts. Im Netzwerk-Tab kann ich den Request anschauen und sehe in dessen „Antwort“-Tab den Quelltext in aller Pracht. Was ist da falsch?

fetch(
  "https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-Einstieg-1.txt",
  {mode:"no-cors"}
)
.then(res=>res.text())
.then(txt=>console.log(txt))
.catch(e=>console.error(e))

Liebe Grüße

Felix Riesterer

[Felix Riesterer]

Fortsetzung...

Wenn ich den Content-Type der Response wissen will, steht da null drinnen:

// aus einer function mit async
try {
	const response = await fetch(
		"https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-Einstieg-1.txt",
		{ method: "GET", mode: "no-cors" }
	);

	const contentType = response.headers.get("content-type");
console.log("content-type",contentType);  // null
	const text = await response.text();
console.log("text",text); // <empty string>
	this.container = linkElement.parentNode.parentNode.insertBefore(
		document.createElement("div"),
		linkElement.parentNode.nextSibling
	);

} catch (error) {
	console.log(error); // feuert nicht
}

Hatte jemand schon einmal dieses Problem? Hat es mit dem CORS-Dingens zu tun? Denn im Netzwerk-Tab steht die Antwort inklusive aller Header:

GET
	
scheme
	https
host
	wiki-test.selfhtml.org
filename
	/extensions/Selfhtml/example.php/Beispiel:HTML-Einstieg-1.txt
Adresse
	89.238.67.49:443
Status
200
OK
VersionHTTP/1.1
Übertragen806 B (812 B Größe)
Referrer Policystrict-origin-when-cross-origin
DNS-AuflösungSystem

	
Connection
	Keep-Alive
Content-Encoding
	gzip
Content-Length
	511
Content-Type
	text/plain; charset=utf-8
Date
	Sat, 20 Apr 2024 10:42:27 GMT
Keep-Alive
	timeout=5, max=50
Server
	Apache
Vary
	Accept-Encoding
X-Content-Type-Options
	nosniff
X-Powered-By
	PHP/7.0.33
	
Accept
	*/*
Accept-Encoding
	gzip, deflate, br
Accept-Language
	de,en-US;q=0.7,en;q=0.3
Cache-Control
	no-cache
Connection
	keep-alive
DNT
	1
Host
	wiki-test.selfhtml.org
Pragma
	no-cache
Referer
	http://felix.localhost/
Sec-Fetch-Dest
	empty
Sec-Fetch-Mode
	no-cors
Sec-Fetch-Site
	cross-site
User-Agent
	Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

ich sehe im Testwiki kein kürzlich von Dir erstelltes HTML-Beispiel, worin dieser fetch stehen könnte.

Von wo wird das Script geladen, das den fetch macht? Wenn es von einer anderen Domain als wiki-test.selfhtml.org kommt, dann ist die Antwort des Servers bei mode:'no-cors' opak, d.h. nicht von JavaScript zugänglich. Selbst wenn sie im Netzwerktrace steht.

Mit mode:'cors' hat der Server die Chance, dem abfragenden Origin den Request zu erlauben. Was wir im Wiki vermutlich nicht tun.

Das sind Dinge, die die JS-Engine abhandelt. Der Server liefert die Daten so oder so - was ich eigentlich doof finde, aber wohl Legacy-Gründe hat. D.h. das Ergebnis kommt, aber JS lässt Dich nicht ran, wenn der Server nicht den passenden CORS Header schickt. Egal ob cors oder no-cors.

Ich habe gerade mal auf wiki-test Frickl gestartet und darin den fetch gemacht - das Ergebnis landete in der Konsole.

Rolf

[Felix Riesterer]

Lieber Rolf,

vielen Dank für Deinen Hinweis.

ich sehe im Testwiki kein kürzlich von Dir erstelltes HTML-Beispiel, worin dieser fetch stehen könnte.

Ich teste von meinem lokalen Rechner aus.

Mit mode:'cors' hat der Server die Chance, dem abfragenden Origin den Request zu erlauben. Was wir im Wiki vermutlich nicht tun.

Ja, das ist so.

aber JS lässt Dich nicht ran, wenn der Server nicht den passenden CORS Header schickt. Egal ob cors oder no-cors.

Schade, dass dann keine Exception kommt, oder zumindest irgend eine Möglichkeit, sich den Fehler ausgeben zu lassen. So steht da einfach nix. Ja, response.ok war false, aber einen Fehler konnte ich nicht aus dem Reponse-Objekt herauslösen, der mir das kommuniziert hätte.

mal auf wiki-test Frickl gestartet und darin den fetch gemacht

Das leuchtet mir sofort ein. Also wieder etwas gelernt: fetch macht bei mode:no-cors ein silent fail, wenn CORS nicht erfüllt wird.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

so silent ist das nicht, ok muss man sowieso abfragen.

Wenn du einen crashing fail willst, nimm mode:"cors".

Rolf