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

Dieser Text wurde mithilfe von KI übersetzt. Wenn du den Originaltext auf Englisch lesen möchtest, klicke hier.

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

Alle Beispiele verwenden reines JavaScript mit der Fetch API.

Nicht authentifizierte Anfragen

Du kannst nicht authentifizierte GET-Anfragen ohne zusätzlichen Aufwand stellen. Führe 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, musst du 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 Access Token für den aktuellen Benutzer zu erhalten, muss deine App den OAuth-Workflow verwenden, bei dem der Benutzer explizit die Berechtigung erteilt. Für clientseitige Apps kannst du den OAuth 2.0 Implicit Flow verwenden, der kein Client Secret erfordert.

Die Anfrage stellen

Bei der Anfrage musst du 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 deiner browserbasierten Anwendung zu vermeiden, musst du die Domains auf die Whitelist setzen, die diese Anfragen stellen werden. Wenn du deine Domain nicht auf die Whitelist setzt, erhältst du 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.

Du kannst deine Domain(s) beim Erstellen oder Konfigurieren deiner Anwendung mit dem Anwendungsmanager auf die Whitelist setzen.

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