为什么授权 header 令牌没有显示在我的浏览器中

Question

我想创建一个登录系统。我有一个 Spring 引导 Api 和一个 JWT-Token 用于安全的 this 教程。在我的 Front-End 上，我使用 React JS 和 Axios 来处理请求。

这是我的 axios 配置：

import axios from 'axios';

const api = axios.create({
    baseURL:'http://localhost:8080',
    headers: {'Access-Control-Allow-Origin': '*'}
});

export default api;

这是登录功能：

loginClickHandler = () => {
        const data = {
            "username":this.state.username,
            "password":this.state.password
        };
        api.post("/login",data)
            .then(response => {
                console.log(response);
                if(response.data !== null) {
                    this.setState({
                        loggedIn:true,
                        userData:response.data
                    });
                }else{
                    this.showMessage(2,response.data.error)
                }
            })
            .catch(error => {
                this.showMessage(2,error);
            });
    };

登录功能本身和其他一切工作正常，但我没有获得在浏览器中显示为 header 的授权令牌。这是console.log(response)（只有header）：

headers:
cache-control: "no-cache, no-store, max-age=0, must-revalidate"
content-length: "0"
expires: "0"
pragma: "no-cache"

然而，当我使用 Postman 请求时，我得到 14 headers，其中之一是 Authorization header，其中包含令牌不出所料。

现在我的问题是，如何在我的浏览器中显示 header，以便我可以存储它以供以后请求。

谢谢

编辑：

我刚发现授权 Header 显示在浏览器的“网络”选项卡中，但未显示在响应中。

解决方案：

我不得不在我的 JWTAuthenticationFilter successfulAuthentication 方法中添加这一行：

res.addHeader("Access-Control-Expose-Headers",HEADER_STRING);

@Jack Chen 和@Sarthak Aggarwal 建议

Answer 1

您无法在此处的客户端请求中设置 header 信息：

import axios from 'axios';

const api = axios.create({
    baseURL:'http://localhost:8080',
    // pass 'Access-Control-Allow-Origin' is not working!
    headers: {'Access-Control-Allow-Origin': '*'}
});

export default api;

因为 CORS, you could not get the correct response before set this header in your server side. You can according to this guide 在您的 Spring 引导服务中设置 header。

希望对您有所帮助。

Answer 2

您可能需要在服务器上设置 The Access-Control-Expose-Headers header，因为它允许允许浏览器访问的服务器白名单 header。`

语法：

Access-Control-Expose-Headers: <header-name>[, <header-name>]*

为什么授权 header 令牌没有显示在我的浏览器中

Why does the Authorization header token does not get displayed in my browser

spring

authorization

spring-security

reactjs

spring-boot