CODEWITHSUNDEEP
spring-bootvue.jshttphttp-headers
Dieter Claessens
Dieter Claessens

Reputation: 129

I can't get header from backend in vuejs

I have a a spring boot backend that validates user login credentials. After validating the user it sends a login token in its response header. This part definitly works because I have seen it work in postman: enter image description here

Now I am trying to get the token into my vuejs front end by doing the following:

import axios from 'axios'

const databaseUrl = 'http://localhost:9090/api'
const datbaseUrlBase = 'http://localhost:9090'

async function getSubjects(){
    const result = await axios.get(`${databaseUrl}/subject`)
    return result.data
}

async function updateSubject(subject){
    let body = {
        "name": subject.name,
        "first_name": subject.first_name,
        "date_of_birth": subject.date_of_birth
    }
    let result = await axios.put(`${databaseUrl}/subject/${subject.subjectid}`, body)
    return result.data
}

async function getSubject(id){
    let result = await axios.get(`${databaseUrl}/subject/${id}`)
    return result.data
}

async function getSimulationsForSubject(id){
    let result = await axios.get(`${databaseUrl}/subject/${id}/simulation`)
    return result.data
}

async function deleteSubject(id){
    await axios.delete(`${databaseUrl}/subject/${id}`)
}

async function makeSubject(subject){
    await axios.post(`${databaseUrl}/subject`, subject)
}

async function updateDiagnose(diagnose, id){
    await axios.put(`${databaseUrl}/subject/${id}/diagnose/${diagnose.diagnoseid}`, diagnose)
}

async function addSymptomToDiagnose(symptom, diagnoseid, subjectid){
    await axios.post(`${databaseUrl}/subject/${subjectid}/diagnose/${diagnoseid}/symptom`, symptom)
}

async function updateSymptom(symptom_id, symptom, subjectid, diagnoseid){
    await axios.put(`${databaseUrl}/subject/${subjectid}/diagnose/${diagnoseid}/symptom/${symptom_id}`, symptom)
}

async function getDiagnoseForSubject(diagnoseid, subjectid){
    let result = await axios.get(`${databaseUrl}/subject/${subjectid}/diagnose/${diagnoseid}`)
    return result.data
}

async function deleteSymptomForDiagnose(subjectid, diagnoseid, symptomid){
    await axios.delete(`${databaseUrl}/subject/${subjectid}/diagnose/${diagnoseid}/symptom/${symptomid}`)
}

async function getStatisticsForSimulation(subjectid, simulationid){
    let result = await axios.get(`${databaseUrl}/subject/${subjectid}/simulation/${simulationid}/statistics`)
    return result.data
}

async function login(login){
    let result = await axios.post(`${datbaseUrlBase}/login`, login)
    return result.headers
}

export default{
    getSubjects,
    updateSubject,
    getSubject,
    getSimulationsForSubject,
    deleteSubject,
    makeSubject,
    updateDiagnose,
    addSymptomToDiagnose,
    getDiagnoseForSubject,
    deleteSymptomForDiagnose,
    updateSymptom,
    getStatisticsForSimulation,
    login
}

Notice the login function above. Whenever I run this code the console.log gives undefined in the browser. And the console.log(result.headers) gives this: enter image description here

Is there anyway of accessing this token in my vuejs frontend?

Upvotes: 3

Views: 757

Answers (1)

Jordan
Jordan

Reputation: 2371

If the server is cross-origin then browser CORS dictates that only a handful of default headers are accessible in a response.

You need to either have a matching origin, or enable the Access-Control-Expose-Headers header by setting it in your response like this:

Access-Control-Expose-Headers: token

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Upvotes: 1

Related Questions