Uso de la REST API desde JavaScript y el navegador (CORS)

Este texto fue traducido usando IA. Si deseas ver el texto original en inglés, haz clic aquí.

La REST API se puede usar directamente desde el navegador utilizando Javascript. Si añades a la lista blanca los dominios que deseas usar para tu aplicación, enviaremos las cabeceras CORS correctas. Se admiten tanto las llamadas autenticadas como las no autenticadas. Para realizar solicitudes autenticadas, sigue la sección implícita de la documentación de OAuth para obtener un token de usuario.

Todos los ejemplos utilizan JavaScript puro con la Fetch API.

Solicitudes no autenticadas

Puedes realizar solicitudes GET no autenticadas sin trabajo adicional. Simplemente haz una solicitud HTTP sencilla:

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);
  });

Solicitudes autenticadas

Para realizar solicitudes autenticadas, debes proporcionar un token que verifique que el propietario del recurso ha concedido a la aplicación permiso para actuar en su nombre.

Obtener/almacenar el token de usuario

Para obtener un token de acceso válido para el usuario actual, tu aplicación debe usar el flujo de trabajo OAuth, donde el usuario concede permiso de forma explícita. Para aplicaciones del lado del cliente, puedes usar el flujo implícito de OAuth 2.0, que no requiere un secreto de cliente.

Realizar la solicitud

Al realizar la solicitud, solo necesitas pasar el token de acceso como un encabezado.

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);
});

Lista blanca de orígenes

Para evitar errores de CORS al realizar llamadas autenticadas a la API desde tu aplicación basada en navegador, debes añadir a la lista blanca los dominios que realizarán esas solicitudes. Si no añades tu dominio a la lista blanca, recibirás un error de CORS como este:

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.

Puedes añadir tu(s) dominio(s) a la lista blanca mientras creas o configuras tu aplicación con el gestor de aplicaciones.

Para añadir múltiples dominios a la lista blanca, introduce cada URL de dominio en una línea separada en el campo de entrada «Javascript Origins».