Estoy tratando de enviar el token JWT en los encabezados de la llamada a la API de Axios , pero en react.js no puedo enviarlo. He intentado algunas formas de enviarlo en el encabezado, pero en el backend, no puedo obtenerlo. Y si envía el mismo token al postman , el backend puede extraer el token de los encabezados.
const token = window.localStorage.getItem("token"); console.log("token",token) // token const apiHeaders = { headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "application/json, text/plain, */*", "token": `${token}`, }, }; const result = await Axios.get( `${process.env.REACT_APP_BASE_URL}/api/student/AllProjects`, { withCredentials: true, headers: apiHeaders, } );También he intentado enviar token como
token: `${token}` or token: tokenNo sé lo que estoy haciendo mal aquí?
Creo que tu problema es que tienes headers dos veces:
const apiHeaders = { headers: { ... } } Entonces apiHeaders es un objeto con un campo de headers .
Cuando usa eso en la llamada de get , eso se expande a lo que es efectivamente:
const result = await Axios.get( `${process.env.REACT_APP_BASE_URL}/api/student/AllProjects`, { // You probably don't need to do this! withCredentials: true, headers: { headers: { token: token } }, } );Por cierto, sería normal pasar eso como un "token de portador" en el encabezado de autorización:
headers: { Authorization: `Bearer ${token}` } Además, probablemente no necesite withCredentials cuando publique el token en un encabezado.