1

Tengo este código, que hace una llamada a una API con AXIOS con un .post, para autenticar, y si la autenticación es correcta, luego debería hacer una nueva llamada .get usando el token para devolver los datos de la API.

El token lo guardo en localstorage y me llega bien.

El problema es que la llamda AXIOS con .GET me da error...'error: "Empty header "Content-Type" ? I need this information to let you in"' (este error lo puedo leer en la network de Chrome)

alguna sugerencia? Gracias.

let config1 = {
        headers: {                     
            'Content-Type': 'application/json'
        }
      }

    let data ={
        username : 'training',
        password : 'traiOA9876'

      }  
      const BASE_URL = 'http://localhost:4000/locations';
      const BASE_URL1 = 'http://localhost:4000/login';

      axios.post(BASE_URL1, data, config1)    
          .then((response)=>{             
             console.log(response)
             //return plexusItems()
             let token = response.data.token;
             localStorage.setItem('token', token)
             const getToken = localStorage.getItem('token')
             console.log(getToken)
             return axios.get(BASE_URL, {headers: {
                  'Content-Type': 'application/json',
                'Authorization': `Token ${getToken}`,
                
            }}) 
              .then((res)=>{
                    console.log(res)
                    plexusItems(res)
                    
                })
          })    

pd: he hecho pruebas con Postman, poniendo en postman el token que me da el primer Axios, y funciona el server.

Gracias

pd: en el server.js hay esta condición, si la elimino, todo funciona. Si la respeto, no consigo que funcione.

Condicion desde el server.js

2 respuestas 2

0

Algo me dice que por querer hacer más, estás haciendo menos. Es decir, no tienes por qué manejar las cabeceras por separado en una consulta axios, si no recuerdo mal, por defecto, la cabecera de axios de content type es precisamente para enviar datos json. De todas formas, si lo que quieres es mantener cabeceras homogéneas en todas tus consultas, solo debes crear una instancia de axios y trabajar con esa instancia para manejar las consultas, es decir algo como esto:

const instance = axios.create({
   headers: {
    'Content-Type': 'application/json'
   }
})

let btn = document.querySelector('button');

btn.addEventListener('click', () =>{
  instance.post('https://reqres.in/api/login', {
    email: '[email protected]',
    password: 'cityslicka'
  }).then(res => {
      if(res.data.token) {
        instance.get('https://reqres.in/api/users/2')
          .then(res => {
            const div = document.querySelector('div')
            
            div.innerHTML = `Usuario ${res.data.data.first_name} ${res.data.data.last_name} Logueado`
          })
          .catch(err => console.error(err))
      }
    })
  .catch(err => console.error(err))
})
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button>Click para doble consulta</button>

<div style="margin: 2rem auto;"></div>

Igualmente te dejo un ejemplo de cómo sin editar las cabeceras, axios automáticamente trabaja todo con cabeceras application/json y todo funciona correctamente en una doble consulta POST -> GET. Eso suponiendo que toda la información que proporcionas sea correcta

let btn = document.querySelector('button');

btn.addEventListener('click', () =>{
  axios.post('https://reqres.in/api/login', {
    email: '[email protected]',
    password: 'cityslicka'
  }).then(res => {
      if(res.data.token) {
        axios.get('https://reqres.in/api/users/2')
          .then(res => {
            const div = document.querySelector('div')
            
            div.innerHTML = `Usuario ${res.data.data.first_name} ${res.data.data.last_name} Logueado`
          })
          .catch(err => console.error(err))
      }
    })
  .catch(err => console.error(err))
})
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<button>Click para doble consulta</button>

<div style="margin: 2rem auto;"></div>

7
  • Gracias por tu aportación. Pero no veo que en tu código, aparezca el tema del uso del token, q se supone, lo recibes después del axios.post(), de ahí mi problema. Q el axios.get(), toma el token dentro del header con Autorization y el content-type. Y me da un error, pues al estar el body del get vacio, se omite el Content-type..... Commented el 5 nov. 2021 a las 15:17
  • Volvemos a lo mismo. Le das muchas vueltas a lo del token. Es decir, está bien que lo guardes, ¿pero de verdad es necesario que lo guardes en el localStorage para volverlo a llamar del localStorage? Esa parte no tiene mucho sentido. Entiendo que lo guardes para futuras referencias pero no cuando lo retornas de una vez. Además, el error de tu pregunta hace referencia al Content-Type, no al Authorization. Que igual esto con interceptors se resuelve también.
    – gaidyjg
    Commented el 5 nov. 2021 a las 18:38
  • Edité la pregunta para que veas, que igual si me regresa algún token, funciona. Todo depende del tipo de aplicación y autenticación que estés usando. ¿Estás seguro que tu Authorization es de esa manera?
    – gaidyjg
    Commented el 5 nov. 2021 a las 18:52
  • Gracias @gaidyjg pero como puedes pasar en el instance la autorización, si todavía no tienes esa variable? como puedo mandar dos headers en la misma petición. es eso posible? gracias por tu tiempo y tus consejos Commented el 5 nov. 2021 a las 20:53
  • 1
    Yo creo que está diciendo justo lo contrario, que si paso un content-type que no sea igua !== a application/json o lo envio vacio, me da el error. Pero cuando lo paso me da el error igual.....eso es lo raro. Commented el 8 nov. 2021 a las 7:48
0

Para no tener que deshabilitar las líneas de código que en el server.js nos dan el error, hay que hacer la petición usando el método fetch(), ya que el método AXIOS, no toma en cuenta los contet-type del header en una petición GET, si esta tiene el body vacio.

Dejo aquí las dos opciones de petición a la API, para la petición AXIOS, hay que deshabilitar en el archivo server.js las lineas de la 86 a la 92.

Dentro del useEffect:

// VERSION CON FETCH

useEffect(() => { 
  
    fetch("http://localhost:8624/login", {method:'POST', body: JSON.stringify(data), headers:{"Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json"}})
      .then(res => res.json())
      .then(response => {
        console.log(response)
        let token = response.token;
        localStorage.setItem("token", token);
      
        return fetch("http://localhost:8624/locations",  {
                method: "GET",
                headers: {
                  "Access-Control-Allow-Origin": "*",
                  "Content-Type": "application/json",
                  'Authorization': `Token ${token}`,
                },  
              })
              .then((res)=>res.json())
              .then(response => {setPlexusList(response)})
              
            })      
          
      // eslint-disable-next-line
  }, []);

VERSION CON AXIOS:

useEffect(() => {

      VERSION CON AXIOS


 instance
      .post("http://localhost:8624/login", data)
      .then((response) => {
        console.log(response);
        let token = response.data.token;
        localStorage.setItem("token", token);
        
       // console.log(token);
        return instance.get("http://localhost:8624/locations", {
          headers: {
            'Authorization': `Token ${token}`,
          }, //AL SER UNA LLAMADA DE TIPO GET(), Y NO TENER CONTENIDO EN EL BODY, AXIOS OMITIRÁ EL CONTENT-TYPE
        });//ESTO DABA UN ERROR (400) Y PARA ELLO
        // HE DESHABILITADO EN EL SERVER EL ERROR (400) LINEA 86, PARA QUE FUNCIONARA.
      })
      .then((res) => {
        console.log(res.data);
        setPlexusList(res.data);
      });
      eslint-disable-next-line
  }, []);

Tu Respuesta

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

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