CORS Fehler Missing Allow Origin

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