CORS Fehler Missing Allow Origin

lima-city: Webhosting, Domains und Cloud
3 Pluspunkte 0 Minuspunkte

Ich möchte einen Wikipedia Artikel mit der Wikipedia API mit Ajax in ein DIV laden aber es funktioniert nicht. In der Browser Console sehe ich den Fehler

Response-Body ist für Skripte nicht verfügbar (Grund: CORS Missing Allow Origin)

Das ist mein Code

<html>
<head>
</head>
<body>

<input type="text" id="articleTitle" placeholder="Artikelnamen">
<button id="embedArticle">einbetten</button>
<div id="articleContent"></div>

<script>
document.getElementById('embedArticle').addEventListener('click', embedArticle);

function embedArticle() {
  const articleTitle = document.getElementById('articleTitle').value;
  const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro=true&titles=${encodeURIComponent(articleTitle)}`;

  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      const page = data.query.pages[Object.keys(data.query.pages)[0]];
      displayArticle(page.title, page.extract);
    })
    .catch(error => {
      console.error('Error fetching article:', error);
    });
}

function displayArticle(title, content) {
  const articleContent = document.getElementById('articleContent');
  articleContent.innerHTML = '';

  const titleElement = document.createElement('h2');
  titleElement.textContent = title;
  articleContent.appendChild(titleElement);

  const contentElement = document.createElement('div');
  contentElement.innerHTML = content;
  articleContent.appendChild(contentElement);
}
</script>

</body>
</html>
von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Der Fehler "CORS Missing Allow Origin" tritt auf, wenn eine Webanwendung (meist im Browser) versucht, Ressourcen von einer anderen Domain oder einem anderen Ursprungsort zu laden, und der Server keine gültige "Access-Control-Allow-Origin" Einstellung in seiner Antwort enthält. Das führt dazu, dass der Browser aus Sicherheitsgründen verhindert, dass die Anwendung auf die angeforderten Ressourcen zugreift. Wenn dein Server PHP unterstützt kannst du ein kleines Proxy Script bauen.

<?php

$articleTitle = $_GET['title'];

$apiUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro=true&titles=" . urlencode($articleTitle);

$response = file_get_contents($apiUrl);

echo $response;

?>

Und im Javascript musst du noch die URL zur API auf dein Proxy Script umleiten.

const apiUrl = `proxy.php?title=${encodeURIComponent(articleTitle)}`;

von  

Ähnliche Fragen

Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Beiträge bewerten
  • Inhalte bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft. Unser Ziel: Guter Inhalt. Für alle.

2.3k Fragen

2.8k Antworten

260 Kommentare

12 Nutzer