无法从响应标头中获取 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 请求时默认只能访问部分响应头，默认响应头如下：

1. 缓存控制

2. 内容语言

3. 内容类型

4. 过期

5. 最后修改时间

6. 杂注

CORS 规范要求服务器明确授予客户端应用程序读取默认标头以外的标头的权限。

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

您可以在此处阅读有关此问题的更多信息：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);
        });
}, []);

Answer 3

CORS 默认情况下仅允许某些标头。要允许所需的标头，您必须使用

Access-Control-Expose-Headers

以下是如何使用它的示例：

res.set('X-Total-Count',totalDocs);
res.set('Access-Control-Expose-Headers', 'X-Total-Count');