Question

我想创建一个登录系统。我有一个用this教程编写的带有JWT令牌的Spring Boot Api，用于安全性。在前端，我使用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);
            });
    };

登录功能本身以及其他所有功能都可以正常工作，但是我没有在浏览器中显示作为标题的授权令牌。这是console.log(response)（仅标头）：

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

但是，当我使用Postman进行请求时，我得到了14个标头，其中之一就是 Authorization 标头，其中的令牌与预期的一样。

现在的问题是，如何使标题显示在浏览器中，以便我将其存储以供以后使用。

谢谢

编辑：

我刚刚发现授权标头显示在浏览器的“网络”标签中，但未显示在响应中。

解决方案：

我必须在我的JWTAuthenticationFilter successfulAuthentication方法中添加以下行：

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

@Jack Chen和@Sarthak Aggarwal建议

Answer 1

您不能在此处的客户端请求中设置标头信息：

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，您无法在服务器端设置此标头之前得到正确的响应。您可以根据this guide在Spring Boot服务中设置标头。

希望这会有所帮助。

Answer 2

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

语法：

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

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

2 个答案: