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.