0

Estoy intentando hacer una petición simple con Axios en un proyecto con React, esta es la petición:

El puerto en el que se ejecuta el proyecto del front es en el 3000. Y el de la API que hace conexión a la base de datos es el 8080.

      axios
      .get('http://localhost:8080/api/pregunta')
      .then(function(response) {
        // handle success
        console.log(response);
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      })
      .finally(function() {
        // always executed
      });

La consola de Google Chrome me tira el siguiente error:

Preguntas.js:243 undefined
preguntas:1 Access to XMLHttpRequest at
'https://localhost:8080/api/pregunta' from origin
'http://localhost:3000' has been blocked by CORS policy: Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Preguntas.js:149 Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:81)

¿Cómo evito que pase eso si hago las pruebas en localhost?

Intentaba armar una petición personalizada para especificar cosas a la petición, pero no sé cuales son los headers que necesito poner... Este fue mi intento de petición personalizada:

const config = {
      url: '/pregunta',
      method: 'get',
      baseURL: 'https://localhost:8080/api/',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }
    };
      axios
      .request(config)
      .then(function(response) {
        // handle success
        console.log(response);
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      })
      .finally(function() {
        // always executed
      });

También he intentado con http-proxy-middleware, pero no sé ajustar el proxy de Axios.

1
  • 1
    el problema no es axios es tu backend debe permitir el cors el 23 dic. 2019 a las 19:37

3 respuestas 3

2

Utilicé la dependencia corsde npm y la apliqué a Express.

const cors = require('cors');
const app = express();
app.use(cors());

También funciona la extensión de Chrome: CORS Unblock. Si solo lo necesitas para tus pruebas en dev.

1

Da un vistazo a este paquete: https://www.npmjs.com/package/cors

Lo había utilizado para una aplicación hace un tiempo atrás, es fácil de implementar y se explica muy fácil en la documentación. El módulo genera automáticamente los headers necesarios para que puedas acceder al API sin problema.

Tomado del propietario de la pregunta, Parzival:

var cors = require('cors');
const app = express();
app.use(cors());
1
  • 3
    Si bien este enlace puede ayudar a responder la duda, es mejor editar y añadir las partes escenciales aquí, dejando solo en link como referencia, checa Cómo responder
    – BetaM
    el 23 dic. 2019 a las 19:28
-1

Buenas tardes resolví el problema, con las siguientes líneas

const cors = require('cors');
const app = express();
app.use(cors());

Tu Respuesta

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

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