无法从响应标头中获取 X-Total-Count答案

【问题标题】：can't take X-Total-Count from response header无法从响应标头中获取 X-Total-Count
【发布时间】：2021-09-23 12:40:47
【问题描述】：

当我通过 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 我尝试了所有方法

【问题讨论】：

标签： javascript reactjs axios postman react-query

【解决方案1】：

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

缓存控制
内容-语言
内容类型
过期
最后修改
语用

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

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

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

【讨论】：

【解决方案2】：

试试类似的东西

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

【讨论】：