我无法从 vuejs 的后端获取 header

Question

我有一个 spring 启动后端来验证用户登录凭据。验证用户后，它会在其响应 header 中发送一个登录令牌。这部分绝对有效，因为我已经看到它在邮递员中有效：

现在我试图通过执行以下操作将令牌放入我的 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 前端访问此令牌？

Answer 1

如果服务器是 cross-origin，则浏览器 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

我无法从 vuejs 的后端获取 header

I can't get header from backend in vuejs

http

http-headers

spring-boot

vue.js