Блог

У меня есть серверная часть spring boot, которая проверяет учетные данные для входа пользователя. После проверки пользователя он отправляет маркер входа в свой заголовок ответа. Эта часть определенно работает, потому что я видел, как она работает в postman:

Теперь я пытаюсь вставить токен в свой интерфейс vuejs, выполнив следующее:

 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
}
 

Обратите внимание на функцию входа в систему выше. Всякий раз, когда я запускаю этот код в консоли.журнал дает неопределенное значение в браузере.
И console.log(result.headers) дает это:

Есть ли какой-либо доступ к этому токену в моем интерфейсе vuejs?

Если сервер имеет перекрестное происхождение, то CORS браузера диктует, что в ответе доступно только несколько заголовков по умолчанию.

Вам нужно либо иметь соответствующий источник, либо включить Access-Control-Expose-Headers заголовок, установив его в своем ответе следующим образом:

 Access-Control-Expose-Headers: token
 

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