0

tengo una API en un Micro de DETA SPACE (anteriormente DETA.DEV). Anteriormente accedía a mi API usando cURL y PHP, pero ahora quiero usar Javascript. El problema es que al intentarlo me sale esto: cors1

Y en la consola este mensaje:

Access to fetch at 'https://lindejemplo.deta.app/api/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Este fragmento de javascript es con lo que estoy haciendo la solicitud:

async function getInfo(cardNumber) {
  const bin = cardNumber.substring(0, 6);
  try {
    const response = await fetch(`https://linkdejemplo.deta.app/api/${bin}`);
    const jsonResponse = await response.json();
    let type, country;
    if (jsonResponse.result && jsonResponse.data.type) {
      type = jsonResponse.data.type === "CREDIT" ? "Crédito" : "Débito";
    } else {
      type = "Desconocido";
    }
    if (jsonResponse.result && jsonResponse.data.countryInfo && jsonResponse.data.countryInfo.name) {
      country = jsonResponse.data.countryInfo.name;
    } else {
      country = "Desconocido";
    }
    return `${country} - ${type}`;
  } catch (error) {
    console.error(error);
    return "Error al obtener información de la tarjeta";
  }
}

Y no tengo idea de cómo habilitarlos, en la documentación aparece el apartado de "public_routes" y "Server side". Hay un archivo llamado "Spacefile" dónde se configuran las cosas del proyecto, pero solo entiendo lo básico.

Gracias de antemano.

1 respuesta 1

0

El error que estás recibiendo es un problema común con las solicitudes de API que se realizan desde un origen diferente. Esto se conoce como el problema de política de mismo origen (same-origin policy), que es un mecanismo de seguridad en los navegadores web que impide que un script en un sitio web acceda a recursos en otro sitio web que no tiene la misma URL de origen, protocolo y puerto.

Para solucionar este problema, necesitas habilitar el CORS en tu API. CORS significa "Compartir Recursos de Origen Cruzado" (Cross-Origin Resource Sharing) y es una tecnología que permite que un navegador web acceda a recursos en un servidor que tiene un origen diferente. En tu caso, necesitas agregar un encabezado Access-Control-Allow-Origin a la respuesta de tu API para permitir que se acceda desde tu sitio web.

En el archivo Spacefile de tu proyecto, puedes agregar la siguiente configuración para habilitar el CORS:

routes:
  - cors: true

Esto habilitará el CORS para todas las rutas en tu API. Si solo deseas habilitarlo para rutas específicas, puedes agregar una lista de rutas públicas en tu archivo Spacefile de la siguiente manera:

public_routes:
  - /api/*

Esto habilitará el CORS solo para rutas que comienzan con "/api/".

Una vez que hayas agregado la configuración CORS a tu proyecto, vuelve a intentar realizar la solicitud desde tu sitio web y debería funcionar correctamente sin errores de CORS.

1
  • gracias amigo, al final solo agregué los CORS al index.js del repositorio Commented el 17 mar. 2023 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.