Mit JSONp Daten von einem externen Server abrufen

Question

Wie kann ich eine Datei von einem Server mit JSONp abrufen aber dabei die cross-domain policy umgehen?

Answer 1

Ein Browser blockiert normalerweise AJAX Anfragen an andere Domains wegen der Same-Origin-Policy, aber script Tags sind von dieser Regel ausgenommen. Du fügst ein script Tag dynamisch zu deiner Webseite hinzu und spezifizierst in der URL einen callback Parameter, der den Namen der Funktion enthält, die die Daten verarbeitet. In diesem Fall nenne ich den Callback "handleResponse".

const script = document.createElement("script");
script.src = "https://server2.com/endpoint.php?callback=handleResponse";
document.body.appendChild(script);

Dann definierst du in deinem HTML die Callback Funktion in Javascript.

function handleResponse(data) {
 const output = document.createElement('pre');
 output.textContent = JSON.stringify(data, null, 2);
 document.body.appendChild(output);
}

Auf der anderen Serverseite erstellst du ein PHP Script welches den Namen der Callback Funktion aus dem Queryparametern übernimmt und die Callback Funktion als Javascript Funktion ausgibt.

<?php

if (isset($_GET['callback'])) {

    $callback = $_GET['callback'];

    // Beispiel-Daten, die du senden möchtest
    $data = [
        "status" => "success",
        "message" => "Daten erfolgreich geladen",
        "data" => [
            "name" => "John Doe",
            "age" => 30,
            "city" => "Berlin"
        ]
    ];

    // JSONP-Response erstellen
    header('Content-Type: application/javascript');

    echo $callback . '(' . json_encode($data) . ');';

}

?>

Comments

Nicht vergessen die HTTP Parameter zu validieren!

$callback = preg_replace('/[^a-zA-Z0-9_]/', '', $_GET['callback']);