es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

URL bloqueada (Encabezado faltante de Access-Control-Allow-Origin) mientras intento obtener los datos de Bluehost para la aplicación del sitio web de React.

Estoy creando un sitio web utilizando (react para el sitio web) y quiero obtener los datos de mi servidor en blueHost utilizando PHP como backend y React (JavaScript) como frontend.

Tengo un problema y no puedo cargar los datos porque mi archivo.php está bloqueado debido al error “Access control allow Origin”.

¿Alguna idea de cómo puedo resolver este problema?

Aquí está mi código app.js (react):

const getData = async () => {
  fetch(URL,{
    mode:'cors',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Origin': 'http://localhost:3004',
      'Access-Control-Allow-Methods': 'GET',
      'Content-type': 'application/json; charset=UTF-8',
      'Access-Control-Allow-Headers':'Origin, X-Requested-With, Content-Type, Accept',
      'Access-Control-Request-Headers': 'x-token'
    }
  })
  .then((response) => response.json())
  .then((json) => console.log(json.flags))
  .catch((error) => console.log(error))
  .finally(() => console.log(false));
}

Y aquí está mi archivo.php:

<?php
include 'DBConfig.php';

$conn = new mysqli($HostName, $HostUser, $HostPass, $DatabaseName);
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

$json = file_get_contents('php://input');
$obj = json_decode($json, true);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM `Transactions`";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row[] = $result->fetch_assoc()) {
        $tem = $row;
        $json = json_encode($tem);
    }
} else {
    $json = json_encode("false");
}

echo $json;
$conn->close();
?>

¿Alguna idea de cómo puedo resolver este problema?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    El problema que estás enfrentando se debe a la política de CORS que impide que una página web realice solicitudes a un dominio diferente al que sirvió la página web.

    Para resolver este problema, debes habilitar CORS en tu código PHP del lado del servidor. Puedes hacer esto agregando los siguientes encabezados a la respuesta:

    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
    header('Access-Control-Allow-Credentials: true');
    

    Estos encabezados permiten que el código del lado del cliente acceda a los recursos del lado del servidor sin ser bloqueado por la política de CORS.

    Además, asegúrate de que la URL que estás utilizando en la solicitud fetch sea correcta y apunte al endpoint correcto del lado del servidor. También asegúrate de que el código del lado del servidor esté devolviendo los datos en un formato JSON válido.

    Una vez que hayas agregado los encabezados de CORS y te hayas asegurado de que la URL y el formato de los datos sean correctos, intenta ejecutar el código nuevamente y verifica si funciona.

Comments are closed.