Manejo de problemas de CORS en la API Fetch

¡Hola, invitado! Encantado de verte aquí 😊 ¡Únete a nuestra comunidad para conocer a nuestra familia, chatear con nosotros, iniciar una discusión y mucho más!

Registro

E

élfico11

Mirón Nv0️⃣
Estoy trabajando en un proyecto de desarrollo web en el que uso la API Fetch para realizar solicitudes de origen cruzado a un dominio diferente. Sin embargo, tengo problemas con CORS (intercambio de recursos entre orígenes) y mis solicitudes están bloqueadas. Probé algunas soluciones que encontré en línea, pero sigo teniendo problemas. Aquí hay una versión simplificada de mi código:
JavaScript: 
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });
Escuché sobre el uso de encabezados CORS en el lado del servidor para permitir solicitudes de origen cruzado, pero no estoy seguro de cómo implementarlas. ¿Alguien puede guiarme sobre la forma correcta de manejar los problemas de CORS? ¿Cómo configuro mi servidor para permitir solicitudes de mi dominio? Estoy usando Express.js en el lado del servidor. ¡Cualquier ayuda sería muy apreciada!
 
Sbenny

Sbenny

Un científico loco
Miembro del equipo
Administración
Escuadrón Mod SB ⭐
✔ Liberador aprobado
Usuario activo
Puede utilizar CURL para guardar una copia en caché del contenido de cualquier URL en un archivo, de modo que pueda abrir dicho archivo en lugar de acceder directamente al sitio web externo.

Ejemplo:


PHP: 
example.php
<?php

$url = $_GET['url'];

function cache_url($url, $skip_cache = FALSE) {

    // settings

    $cachetime = 604800; //one week

    $where = "gcache";

    if ( ! is_dir($where)) {

        mkdir($where);

    }

    

    $hash = md5($url);

    $file = "$where/$hash.cache";

    

    // check the bloody file.

    $mtime = 0;

    if (file_exists($file)) {

        $mtime = filemtime($file);

    }

    $filetimemod = $mtime + $cachetime;

    

    // if the renewal date is smaller than now, return true; else false (no need for update)

    if ($filetimemod < time() OR $skip_cache) {

        $ch = curl_init($url);

        curl_setopt_array($ch, array(

            CURLOPT_HEADER         => FALSE,

            CURLOPT_RETURNTRANSFER => TRUE,

            CURLOPT_USERAGENT      => 'User-Agent: Mozilla/5.0 (Linux; Android 9; moto g(7) play) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.92 Mobile Safari/537.36',

            CURLOPT_FOLLOWLOCATION => TRUE,

            CURLOPT_MAXREDIRS      => 5,

            CURLOPT_CONNECTTIMEOUT => 15,

            CURLOPT_TIMEOUT        => 30,

        ));

        $data = curl_exec($ch);

        curl_close($ch);

        

        // save the file if there's data

        if ($data AND ! $skip_cache) {

            file_put_contents($file, $data);

        }

    } else {

        $data = file_get_contents($file);

    }

    

    return $data;

}

echo cache_url($url, FALSE);

?>
Luego simplemente escribe: ejemplo.com/example.php?url=the_link_here

y podrá acceder a él sin ningún problema de cors, también almacenándolo en caché.

Tenga en cuenta que también necesita crear una carpeta llamada "gcache" en el mismo directorio del archivo example.php.
 
Notable