Wie behebe ich den Fehler „Origin is Not Allowed by Access-Control-Allow-Origin' in Cross-Origin-AJAX-Anfragen?

Problem: „Origin ist durch Access-Control-Allow-Origin nicht zulässig“

Beim Ausführen von Cross-Origin-AJAX-Anfragen mit JavaScript kann der folgende Fehler auftreten :

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

Dieser Fehler tritt aufgrund der „Same Origin Policy“ auf, einer Sicherheitsfunktion, die in Browsern implementiert ist, um zu verhindern, dass bösartige Skripte auf Daten aus anderen Domänen zugreifen.

Ursache

Die „Same Origin Policy“ beschränkt AJAX-Anfragen auf dieselbe Domäne, dasselbe Protokoll und denselben Port wie die Ursprungsseite. Wenn Ihr JavaScript auf einer anderen Domäne, einem anderen Protokoll oder einem anderen Port als dem Server gehostet wird, auf den Sie zugreifen möchten, wird die Anfrage blockiert.

Lösung: JSONP

Um das „Same Origin Policy“ ist eine gängige Lösung die Verwendung von JSONP (JSON mit Padding). Mit JSONP können Sie ursprungsübergreifende Anfragen stellen, indem Sie die Antwort in eine Rückruffunktion einbinden, die in Ihrem eigenen JavaScript definiert ist.

So funktioniert JSONP:

1. Definieren Sie eine Rückruffunktion in Ihr JavaScript.
2. Senden Sie eine AJAX-Anfrage mit der URL, die auf ?callback={callback_function_name} endet.
3. Der Server antwortet mit JSON-Daten, die in die Callback-Funktion eingeschlossen sind.
4. Die Die Rückruffunktion wird ausgeführt und empfängt die Antwortdaten.

Beispiel

Um den Fehler im angegebenen Code zu beheben, der versucht, eine ursprungsübergreifende POST-Anfrage an YouTube zu stellen, müssen Sie kann JSONP wie folgt verwenden:

<code class="javascript">var script = document.createElement('script');
script.src = "http://gdata.youtube.com/action/GetUploadToken?callback=callbackFunction";
document.head.appendChild(script);

function callbackFunction(data) {
    // Use the response data
}</code>

In diesem Beispiel ist callbackFunction eine in Ihrem eigenen JavaScript definierte Funktion, die die Antwort von YouTube als Argument erhält.

Hinweis : Es ist wichtig sicherzustellen, dass der Server, an den Sie die Anfrage senden, JSONP unterstützt und dass Sie den richtigen Namen der Rückruffunktion in der URL verwenden.

Das obige ist der detaillierte Inhalt vonWie behebe ich den Fehler „Origin is Not Allowed by Access-Control-Allow-Origin' in Cross-Origin-AJAX-Anfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!