Search code examples
javascriptreactjsaxiospostmanreact-query

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

when I check the request through the X-Total-Count network there is but when I output the answer to the console there is nothing I don't understand why this is

enter image description here

through the Postman application, I also checked the output

enter image description here

but when I want to display all this on the console, I get undefined why ????

enter image description here

My Code:

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;

console

enter image description here

no X-Total-Count in the console I tried everything

Solution

  • Browsers can only access some response headers by default when it comes to CORS request, the default response headers are the ones listed below:

    1. Cache-Control

    2. Content-Language

    3. Content-Type

    4. Expires

    5. Last-Modified

    6. Pragma

    The CORS spec requires the server to give permissions explicitly for the client side app to read headers other then the default ones.

    So, in order to solve that issue you need to set the Access-Control-Expose-Headers header on your server so it will be allowed to be read on your client app.

    You can read more about this issue here : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers