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.

  • es.davy.ai/
  • Programación /
  • No hay error de CORS con el formulario, pero sí hay error de CORS al realizar una petición de axios por POST.

No hay error de CORS con el formulario, pero sí hay error de CORS al realizar una petición de axios por POST.

26 Jul, 2023 Programación

Estaba tratando de enviar un formulario al backend y quería hacerlo con una solicitud axios, pero obtengo un error de cors con axios. Si hago una solicitud POST con <form> regular, funciona.

Esta es mi función de envío asíncrono:

const formData = new FormData();
formData.append('access_token', '0bf6fe96-3510-4105-ac4c-2656f1f14579');
formData.append('access_token_ttl', '10000000000000000000000000');
const res = await axios.post('myurl', formData, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});

Este es el formulario que funciona:

<form action="myurl" method="post" target="_blank">
      <input name="access_token" value="0bf6fe96-3510-4105-ac4c-2656f1f14579" type="hidden" />
      <input name="access_token_ttl" value="10000000000000000000000000" type="hidden" />
      <input type="submit" value="submit" />
</form>

Pregunta: ¿Cómo hacer una solicitud axios que funcione?

P.D. Aquí está la captura de pantalla del error: Cors error screenshot

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error que estás experimentando se debe a la política de CORS (Compartir recursos de origen cruzado, por sus siglas en inglés). Cuando haces una solicitud con axios, se considera una solicitud de origen cruzado, ya que se realiza desde un dominio diferente. El servidor debe permitir explícitamente esta solicitud a través de las cabeceras CORS.

    Para que funcione tu solicitud con axios, debes asegurarte de que el servidor esté configurado para permitir solicitudes de origen cruzado desde tu dominio. Esto se puede hacer típicamente agregando las cabeceras apropiadas en la respuesta del servidor.

    Si tienes control sobre el backend, puedes permitir solicitudes desde tu origen agregando las siguientes cabeceras a la respuesta del servidor:

    // Permitir solicitudes desde todos los orígenes
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

    Alternativamente, puedes especificar el dominio desde el cual permitir solicitudes en lugar de utilizar el comodín ‘*’.

    Si no tienes control sobre el backend, puedes intentar usar un servidor proxy para hacer la solicitud. Esto implicaría configurar un servidor en tu dominio que actúa como intermediario entre tu frontend y el backend. Tu frontend haría una solicitud a tu servidor proxy, el cual luego reenviaría la solicitud al servidor backend. La respuesta luego sería enviada de vuelta a tu frontend a través del servidor proxy. De esta manera, el servidor backend solo vería solicitudes provenientes del servidor proxy, que se considera del mismo origen.

    Puedes configurar axios para usar un servidor proxy estableciendo proxy en la configuración de axios:

    const axios = require('axios').default;

const instance = axios.create({
  proxy: {
    host: 'localhost',
    port: 3000 // el puerto de tu servidor proxy
  }
});

instance.get('http://midominio.com/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

    En resumen, para hacer que tu solicitud con axios funcione, debes asegurarte de que el servidor backend permita las solicitudes desde tu dominio a través de las cabeceras CORS. Si no tienes control sobre el backend, puedes usar un servidor proxy para hacer la solicitud en su lugar.

Comments are closed.