2016-03-29 4 views
75

Ich habe versucht, die URL einer alten Website fetch und ein Fehler passiert:Was ist eine undurchsichtige Anfrage und wozu dient sie?

Fetch API cannot load http://xyz. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://abc' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' 
to fetch the resource with CORS disabled. 

ich die Botschaft verstanden und versucht, eine undurchsichtige Anfrage zu tun:

fetch("http://xyz", {'mode': 'no-cors'}) 

Ok, es funktioniert jetzt ... aber ich kann es nicht lesen. = \

Was ist der Zweck dann einer undurchsichtigen Anfrage?

Antwort

69

Betrachten Sie den Fall, in dem ein Service-Mitarbeiter als agnostischer Cache fungiert. Ihr einziges Ziel ist es, die gleichen Ressourcen zu erhalten, die Sie von einem Netzwerk erhalten würden, aber schneller. Natürlich können Sie nicht sicherstellen, dass alle Ressourcen Teil Ihres Ursprungs sind (z. B. Bibliotheken, die von CDNs bereitgestellt werden). Da der Service-Mitarbeiter die Netzwerkantworten ändern kann, müssen Sie sicherstellen, dass Sie weder an den Inhalten der Antwort noch an ihren Headern interessiert sind, noch an dem Ergebnis. Sie sind nur an der Antwort als Blackbox interessiert, um sie möglicherweise zu cachen und schneller zu bedienen.

Deshalb wurde { mode: 'no-cors' } für gemacht.

46

Opaque Antworten können nicht von JavaScript zugegriffen werden, aber Sie können sie immer noch mit der Cache API zwischenspeichern und mit ihnen in der fetch Event-Handler in einem Service Worker reagieren. Daher sind sie nützlich, um Ihre App offline zu schalten, auch für Ressourcen, die Sie nicht steuern können (z. B. Ressourcen auf einem CDN, die keine CORS-Header festlegen).

0

Es gibt auch eine Lösung für die Node JS App. CORS Anywhere ist ein NodeJS-Proxy, der der proxied-Anfrage CORS-Header hinzufügt.

Die URL zum Proxy wird buchstäblich vom Pfad genommen, validiert und proxied. Der Protokollteil des Proxy-URI ist optional und lautet standardmäßig "http". Wenn Port 443 angegeben ist, lautet das Protokoll standardmäßig "https".

Dieses Paket enthält keine Einschränkungen für die HTTP-Methoden oder -Header, außer für Cookies. Das Anfordern von Benutzeranmeldeinformationen ist nicht zulässig. Die App kann so konfiguriert werden, dass für die Proxysierung einer Anfrage eine Kopfzeile erforderlich ist, um beispielsweise einen direkten Besuch des Browsers zu vermeiden. https://robwu.nl/cors-anywhere.html

Verwandte Themen