Ajax Fehler CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt

Question

Wenn ich versuche ein HTML Dokument mit Ajax in einen Div Container zu laden sehe ich im Browser die Fehlermeldung:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://orf.at/. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Hier ist die Funktion mit der ich die Seite lade:

<script>
function loadContent() {
    var cont = document.getElementById('content');

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://orf.at', true);  
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            cont.innerHTML = xhr.responseText;
        }
    };    
    xhr.send();
}

loadContent();
</script>

<div id="content"></div>

Answer 1

Der Fehler tritt auf, wenn dein Browser versucht, Daten von einer fremden Domain zu laden. Du kannst eine serverseitige Scriptsprache wie PHP verwenden um den Inhalt abzurufen.

echo file_get_contents("https://orf.at");

In der Javascript Funktion rufst du dann die lokale Datei auf dienem Server auf.

xhr.open('GET', 'lokale_datei.php', true);