无法从响应 header 中获取 X-Total-Count

Question

当我通过 X-Total-Count 网络检查请求时有，但是当我向控制台输出答案时没有任何东西我不明白为什么会这样

通过 Postman 应用程序，我也检查了输出

但是当我想在控制台上显示所有这些时，我得到了未定义的原因？？？？

我的代码：

import React, { useEffect } from "react";
import { useGeneralAPIQuery } from "../../hooks/queries";
import { quickSearchDTO } from "../../types/utils";
import axios from "axios";

const Button = () => {
    const quickSearchQuery = useGeneralAPIQuery<quickSearchDTO[]>("/group", { size: 8 });
    console.log("quickSearchQuery", quickSearchQuery.data)

    useEffect(() => {
        axios.get('http://192.168.8.126:8051/cl-api-react/group?size=8')
            .then(function (response) {
                console.log("header", response.headers);
            });
    }, [])
    
    return (
        <div>
            
        </div>
    );
};
export default Button;

控制台

没有X-Total-Count在控制台我什么都试过了

Answer 1

对于CORS请求，浏览器默认只能访问部分响应header，默认响应header如下：

Cache-Control
Content-Language
Content-Type
过期
Last-Modified
杂注

CORS 规范要求服务器明确授予客户端应用读取 header 其他默认值的权限。

因此，为了解决该问题，您需要在您的服务器上设置 Access-Control-Expose-Headers header，以便允许在您的客户端应用程序上读取它。

您可以在此处阅读有关此问题的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Answer 2

试试这样的东西

useEffect(() => {
    axios.get('http://192.168.8.126:8051/cl-api-react/group?size=8')
        .then(res => {
            console.log("header", res.headers);
        });
}, []);

无法从响应 header 中获取 X-Total-Count

can't take X-Total-Count from response header

javascript

reactjs

postman

axios

react-query