mode: 'no-cors'
wird die Dinge nicht auf magische Weise zum Laufen bringen. Tatsächlich macht es die Sache noch schlimmer, weil ein Effekt darin besteht, den Browsern zu sagen: "Blockiere meinen Frontend-JavaScript-Code unter allen Umständen daran, den Inhalt des Antwortkörpers und der Header anzuzeigen." Natürlich willst du das fast nie.
Was bei Ursprungsübergreifenden Anforderungen von Frontend-JavaScript passiert, ist, dass Browser standardmäßig den Frontend-Code für den grenzüberschreitenden Zugriff auf Ressourcen blockieren. Wenn Access-Control-Allow-Origin
eine Antwort vorliegt, lockern die Browser diese Blockierung und ermöglichen Ihrem Code den Zugriff auf die Antwort.
Wenn eine Site jedoch keine Access-Control-Allow-Origin
Antworten sendet , kann Ihr Frontend-Code nicht direkt auf die Antworten dieser Site zugreifen. Insbesondere können Sie das Problem nicht durch Angabe beheben mode: 'no-cors'
(dies stellt sicher , dass Ihr Frontend-Code nicht auf den Antwortinhalt zugreifen kann).
Eines wird jedoch funktionieren: Wenn Sie Ihre Anfrage über einen CORS-Proxy wie folgt senden :
var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
targetUrl = 'http://catfacts-api.appspot.com/api/facts?number=99'
fetch(proxyUrl + targetUrl)
.then(blob => blob.json())
.then(data => {
console.table(data);
document.querySelector("pre").innerHTML = JSON.stringify(data, null, 2);
return data;
})
.catch(e => {
console.log(e);
return e;
});
<pre></pre>
Hinweis: Wenn Sie versuchen, https://cors-anywhere.herokuapp.com zu verwenden, stellen Sie fest, dass es nicht funktioniert . Sie können Ihren eigenen Proxy auch einfach in nur 2-3 Minuten mit 5 Befehlen für Heroku bereitstellen:
git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master
Nachdem Sie diese Befehle ausgeführt haben, wird Ihr eigener CORS Anywhere-Server ausgeführt, z . B. https://cryptic-headland-94862.herokuapp.com/ . Stellen Sie Ihrer Anforderungs-URL also https://cors-anywhere.herokuapp.com
statt der URL die URL für Ihre eigene Instanz voran. Beispiel: https://cryptic-headland-94862.herokuapp.com/https://example.com .
Ich kann diesen Endpunkt http://catfacts-api.appspot.com/api/facts?number=99
über Postman erreichen
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS erklärt, warum Sie mit Postman nicht über das Frontend auf die Antwort zugreifen können, obwohl Sie mit Postman auf die Antwort zugreifen können JavaScript-Code, der in einer Webanwendung ausgeführt wird, es sei denn, die Antwort enthält einen Access-Control-Allow-Origin
Antwortheader.
http://catfacts-api.appspot.com/api/facts?number=99 hat keinen Access-Control-Allow-Origin
Antwortheader, sodass Ihr Frontend-Code nicht auf den Antwortursprung zugreifen kann.
Ihr Browser kann die Antwort gut erhalten und Sie können sie in Postman und sogar in Browser-Devtools sehen - aber das bedeutet nicht, dass Browser sie Ihrem Code aussetzen. Sie werden nicht, weil es keinen Access-Control-Allow-Origin
Antwortheader hat. Sie müssen stattdessen einen Proxy verwenden, um ihn abzurufen.
Der Proxy sendet die Anforderung an diese Site, erhält die Antwort, fügt den Access-Control-Allow-Origin
Antwortheader und alle anderen benötigten CORS-Header hinzu und gibt diese an Ihren anfordernden Code zurück. Und diese Antwort mit dem Access-Control-Allow-Origin
hinzugefügten Header wird vom Browser angezeigt, sodass der Browser Ihren Frontend-Code tatsächlich auf die Antwort zugreifen lässt.
Also versuche ich, ein Objekt an meinen Fetch zu übergeben, wodurch CORS deaktiviert wird
Das willst du nicht. Um klar zu sein, wenn Sie sagen, dass Sie CORS deaktivieren möchten, meinen Sie tatsächlich, dass Sie die Richtlinie mit demselben Ursprung deaktivieren möchten . CORS selbst ist tatsächlich ein Weg, dies zu tun - CORS ist ein Weg, die Richtlinie mit demselben Ursprung zu lockern, nicht ein Weg, sie einzuschränken.
Es ist jedoch richtig, dass Sie - nur in Ihrer lokalen Umgebung - beispielsweise Ihrem Browser Laufzeitflags geben können, um die Sicherheit zu deaktivieren und unsicher auszuführen, oder Sie können eine Browsererweiterung lokal installieren, um die Richtlinie mit demselben Ursprung zu umgehen ist die Situation nur für Sie vor Ort zu ändern.
Unabhängig davon, was Sie lokal ändern, wird jeder andere, der versucht, Ihre App zu verwenden, weiterhin auf die Richtlinie mit demselben Ursprung stoßen, und Sie können dies auf keinen Fall für andere Benutzer Ihrer App deaktivieren.
Sie möchten es höchstwahrscheinlich nie mode: 'no-cors'
in der Praxis anwenden, außer in einigen wenigen Fällen , und selbst dann nur, wenn Sie genau wissen, was Sie tun und welche Auswirkungen dies hat. Das liegt daran, dass die Einstellung mode: 'no-cors'
dem Browser tatsächlich sagt: "Blockiere meinen Frontend-JavaScript-Code unter allen Umständen daran, den Inhalt des Antworttextes und der Header zu untersuchen." In den meisten Fällen ist das offensichtlich nicht das, was Sie wollen.
Informationen zu den Fällen, in denen Sie die Verwendung in Betracht ziehen mode: 'no-cors'
, finden Sie in der Antwort unter Welche Einschränkungen gelten für undurchsichtige Antworten? für die Details. Der Kern davon ist, dass die Fälle sind:
In dem begrenzten Fall , wenn Sie JavaScript verwenden eine Ressource von einer anderen Herkunft , den Inhalt eines zu machen <script>
, <link rel=stylesheet>
, <img>
, <video>
, <audio>
, <object>
, <embed>
, oder <iframe>
Elements (die wegen Einbettung von Ressourcen funktionieren Cross-Origin ist für diejenigen erlaubt) - aber aus irgendeinem Grunde Sie möchten oder können dies nicht tun, indem Sie beim Markup des Dokuments die Ressourcen-URL als href
oder- src
Attribut für das Element verwenden.
Wenn das einzige, was Sie mit einer Ressource tun möchten, das Zwischenspeichern ist. Wie in der Antwort unter Welche Einschränkungen gelten für undurchsichtige Antworten? In der Praxis gilt das Szenario für die Verwendung von Service Workern. In diesem Fall ist die relevante API die Cache-Speicher-API .
Aber auch in diesen begrenzten Fällen sind einige wichtige Fallstricke zu beachten. Siehe die Antwort unter Welche Einschränkungen gelten für undurchsichtige Antworten? für die Details.
Ich habe auch versucht, das Objekt weiterzugeben { mode: 'opaque'}
Es gibt kein mode: 'opaque'
Anforderungsmodus - opaque
ist stattdessen nur eine Eigenschaft der Antwort , und Browser legen diese undurchsichtige Eigenschaft für Antworten von Anforderungen fest, die mit dem no-cors
Modus gesendet wurden .
Übrigens ist das Wort undurchsichtig ein ziemlich explizites Signal für die Art der Antwort, die Sie erhalten: „undurchsichtig“ bedeutet, dass Sie es nicht sehen können.
cors-anywhere
mag die Problemumgehung für einfache Anwendungsfälle ohne Produkt (dh das Abrufen einiger öffentlich verfügbarer Daten). Diese Antwort bestätigt meinen Verdacht, derno-cors
nicht häufig ist, da seine undurchsichtige Antwort nicht sehr nützlich ist. dh "sehr begrenzte Fälle"; Kann mir jemand Beispiele erklären, wono-cors
es nützlich ist?mode: 'no-cors'
(andernfalls wäre die Antwort leer)Wenn Sie also wie ich eine Website auf localhost entwickeln, auf der Sie versuchen, Daten von der Laravel-API abzurufen und in Ihrem Vue-Frontend zu verwenden, und Sie dieses Problem sehen, habe ich es folgendermaßen gelöst:
php artisan make:middleware Cors
. Dies wirdapp/Http/Middleware/Cors.php
für Sie erstellen .Fügen Sie den folgenden Code in die
handles
Funktion einCors.php
:In
app/Http/kernel.php
den folgenden Eintrag im$routeMiddleware
Array:(Es würde andere Einträge in dem Array wie
auth
,guest
etc. Auch stellen Sie sicher , du bist dies zu tun ,app/Http/kernel.php
weil es eine anderekernel.php
zu in Laravel)Fügen Sie diese Middleware bei der Routenregistrierung für alle Routen hinzu, auf die Sie den Zugriff zulassen möchten, wie folgt:
mounted()
Funktion und nicht in aufrufendata()
. Stellen Sie außerdem sicher, dass Siehttp://
oderhttps://
mit der URL in Ihremfetch()
Anruf verwenden.Volle Credits für Pete Houstons Blog-Artikel .
quelle
header("Access-Control-Allow-Origin: *");
quelle
Die Lösung für mich war, es einfach serverseitig zu machen
Ich habe die C #
WebClient
-Bibliothek verwendet, um die Daten (in meinem Fall Bilddaten) abzurufen und an den Client zurückzusenden. Es gibt wahrscheinlich etwas sehr Ähnliches in Ihrer gewählten serverseitigen Sprache.Sie können es an Ihren eigenen Anwendungsfall anpassen. Der Hauptpunkt ist
client.DownloadData()
ohne CORS-Fehler bearbeitet. In der Regel treten CORS-Probleme nur zwischen Websites auf. Daher ist es in Ordnung, standortübergreifende Anforderungen von Ihrem Server aus zu stellen.Dann ist der React Fetch-Aufruf so einfach wie:
quelle
Sehr einfache Lösung (2 Minuten zu konfigurieren) ist die Verwendung von local-ssl-proxy package from
npm
Die Verwendung ist ziemlich einfach:
1. Installieren Sie das Paket:
npm install -g local-ssl-proxy
2. Während Sie Ihre
local-server
Maske mit dem ausführenlocal-ssl-proxy --source 9001 --target 9000
PS: Ersetzen Sie
--target 9000
mit der-- "number of your port"
und--source 9001
mit--source "number of your port +1"
quelle