Die Host-Site, von der Sie anfordern, scheint CORS nicht zu unterstützen. Daher können Sie fetch()
nicht verwenden, um eine Ursprungsquellanforderung zu erstellen und die Daten zurück zu erhalten. Wenn Sie Ihre fetch()
-Anforderung in mode: 'cors'
ändern, zeigt die Debug-Konsole an, dass die Host-Site keine CORS-Header anbietet, damit der Browser Ihnen das Ergebnis der Anfrage anzeigen kann.
Wenn Sie mode: 'no-cors'
verwenden, versteckt der Browser das Ergebnis von Ihnen (weil Sie keine Berechtigung haben, es zu sehen) und Sie können sehen, die Antwort ist markiert als opaque
.
In ein wenig Stochern auf der api.flightstats.com
Website, habe ich gesehen, dass es JSONP unterstützt, mit dem Sie das fehlende CORS-Support-Problem umgehen und erfolgreich eine Cross-Ursprungsanforderung abschließen können.
Für die Einfachheit zu zeigen, dass es funktionieren kann, habe ich jQuery verwendet, um nur zu beweisen, dass eine JSONP-Anfrage gemacht werden kann. Hier ist dieser Code in einem Arbeits-Snippet. Hinweis: Ich habe die URL von /json/
zu /jsonp/
und spezifischen dataType: "jsonp"
in der jQuery-Anforderung geändert. Dies führt dazu, dass jQuery den Abfrageparameter callback=xxxxx
hinzufügt und die Antwort über das entsprechende Skript (die JSONP-Methode) abruft.
var url =
'https://api.flightstats.com/flex/schedules/rest/v1/jsonp/from/SYD/to/MEL/departing/2016/3/28?appId=f4b1b6c9&appKey=59bd8f0274f2ae88aebd2c1db7794f7f';
$.ajax(url, {dataType: "jsonp"}).then(function(response) {
\t log(response);
}, function(err) {
log("$.ajax() error:")
\t log(err);
})
<script src="http://files.the-friend-family.com/log.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Es sieht für mich wie die Website CORS nicht unterstützt und Sie müssen CORS, um Daten von einer Quer Herkunft mit einem Ajax-Aufruf zu erhalten. Diese Site unterstützt JSONP, sodass Sie diesen Mechanismus verwenden können. Wenn Sie auf einer Kreuzursprungsseite bestimmte Nicht-Korsagen haben, erhalten Sie eine undurchsichtige Antwort zurück, was bedeutet, dass Sie nicht sehen dürfen, dass die tatsächlichen Daten zurückgegeben wurden. Sie müssen Ihre Zugriffsrechte korrigieren. Wenn Sie diese Anfrage auf "cors" setzen, dann wird es Ihnen sagen, dass Corse-Header hier nicht vorhanden sind.Es sieht für mich so aus, als müsste man JSONP aus dem Browser benutzen. – jfriend00