spring-boot - 我无法从 vuejs 的后端获取 header

Question

我有一个用于验证用户登录凭据的 spring boot 后端。验证用户后，它会在其响应 header 中发送登录 token 。这部分绝对有效，因为我已经看到它在 postman 中有效:

现在我正尝试通过执行以下操作将 token 放入我的 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 都会在浏览器中给出 undefined 。console.log(result.headers) 给出了这个:

有没有办法在我的 vuejs 前端访问这个 token ？

Answer 1

如果服务器是跨域的，那么浏览器 CORS 会指示在响应中只能访问少数默认 header 。

您需要有一个匹配的来源，或者通过在您的响应中设置它来启用 Access-Control-Expose-Headers header ，如下所示:

Access-Control-Expose-Headers: token

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