Verwendung der REST API mit JavaScript und dem Browser (CORS)

Dieser Text wurde mithilfe von KI übersetzt. Wenn Sie den Originaltext auf Englisch lesen möchten, klicken Sie hier.

Die REST API kann direkt über den Browser mit JavaScript verwendet werden. Wenn Sie die Domains, die Sie für Ihre Anwendung nutzen möchten, auf die Whitelist setzen, senden wir die korrekten CORS-Header. Sowohl authentifizierte als auch nicht authentifizierte Aufrufe werden unterstützt. Um authentifizierte Anfragen zu stellen, folgen Sie dem Abschnitt „Implicit“ der OAuth-Dokumentation, um ein Benutzer-Token zu erhalten.

Alle Beispiele verwenden reines JavaScript mit der Fetch API.

Nicht authentifizierte Anfragen

Sie können nicht authentifizierte GET-Anfragen ohne zusätzlichen Aufwand stellen. Führen Sie einfach eine einfache HTTP-Anfrage aus:

fetch("https://public-api.wordpress.com/rest/v1/sites/en.blog.wordpress.com/")
  .then(response => response.json())
  .then(data => {
    // data contains site information
  })
  .catch(error => {
    console.error('Error:', error);
  });

Authentifizierte Anfragen

Um authentifizierte Anfragen zu stellen, müssen Sie ein Token bereitstellen, das bestätigt, dass der Ressourceninhaber der App die Berechtigung erteilt hat, in seinem Namen zu handeln.

Benutzer-Token abrufen/speichern

Um ein gültiges Zugriffstoken für den aktuellen Benutzer zu erhalten, muss Ihre App den OAuth-Workflow verwenden, bei dem der Benutzer explizit die Berechtigung erteilt. Für clientseitige Apps können Sie den OAuth 2.0 Implicit Flow verwenden, der kein Client-Secret erfordert.

Die Anfrage stellen

Bei der Anfrage müssen Sie lediglich das Access Token als Header übergeben.

fetch(`https://public-api.wordpress.com/rest/v1/sites/${site_id}/posts/new`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${access_token}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    content: 'testing test'
  })
})
.then(response => response.json())
.then(data => {
  // Handle the response data
})
.catch(error => {
  console.error('Error:', error);
});

Origins auf die Whitelist setzen

Um CORS-Fehler bei authentifizierten API-Aufrufen aus Ihrer browserbasierten Anwendung zu vermeiden, müssen Sie die Domains auf die Whitelist setzen, die diese Anfragen stellen werden. Wenn Sie Ihre Domain nicht auf die Whitelist setzen, erhalten Sie einen CORS-Fehler wie diesen:

Access to XMLHttpRequest at 'https://public-api.wordpress.com/rest/v1/me/' from origin 'https://www.my-demo-domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Sie können Ihre Domain(s) beim Erstellen oder Konfigurieren Ihrer Anwendung mit dem Anwendungsmanager auf die Whitelist setzen.

Um mehrere Domains auf die Whitelist zu setzen, geben Sie jede Domain-URL in einer separaten Zeile im Eingabefeld „Javascript Origins“ ein.