如何通过axios获取请求/响应的总记录（X-Total-Count）？

Question

我有

C:\Users\donhuvy>curl -X GET -H "Authorization: Basic am9obi5kb2U6bW9xdWk=" -i http://localhost:8080/rest/s1/mantle/gl/trans
HTTP/1.1 200 OK
Date: Fri, 17 Sep 2021 10:02:11 GMT
Set-Cookie: JSESSIONID=node01hoaz7mrhzt4fzu5epf224x8h9.node0; Path=/; HttpOnly; SameSite=Lax
Expires: Thu, 01 Jan 1970 00:00:00 GMT
moquiSessionToken: -DN3X-JvoXiKEFsWO6CI
X-CSRF-Token: -DN3X-JvoXiKEFsWO6CI
Set-Cookie: moqui.visitor=e7f02ba0-3ce8-4e74-849c-940d856bbcf1; Path=/; Expires=Sat, 17-Sep-2022 10:02:11 GMT; Max-Age=31536000; HttpOnly
X-Run-Time-ms: 16
X-Total-Count: 26
X-Page-Index: 0
X-Page-Size: 30
X-Page-Max-Index: 0
X-Page-Range-Low: 1
X-Page-Range-High: 26
Content-Type: application/json;charset=utf-8
Vary: Accept-Encoding, User-Agent
Content-Length: 8398
Server: Jetty(9.4.43.v20210629)

[ {
  "acctgTransId" : "100000",
  "acctgTransTypeEnumId" : "AttAssetReceipt",
  "organizationPartyId" : "CaDocss",
  "transactionDate" : 1632243600000,
  "isPosted" : "N",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "AFA",
  "lastUpdatedStamp" : 1631264197476
}, {
  "acctgTransId" : "100051",
  "acctgTransTypeEnumId" : "AttAssetReceipt",
  "organizationPartyId" : "_NA_",
  "transactionDate" : 1631552400000,
  "isPosted" : "N",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ALL",
  "lastUpdatedStamp" : 1631789869848
}, {
  "acctgTransId" : "100102",
  "acctgTransTypeEnumId" : "AttAmortization",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861400000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "USD",
  "lastUpdatedStamp" : 1631861522226
}, {
  "acctgTransId" : "100103",
  "acctgTransTypeEnumId" : "AttInventoryVariance",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1630997400000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "UYU",
  "lastUpdatedStamp" : 1631861532863
}, {
  "acctgTransId" : "100104",
  "acctgTransTypeEnumId" : "AttIncomingPayment",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861400000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "YER",
  "lastUpdatedStamp" : 1631861542205
}, {
  "acctgTransId" : "100105",
  "acctgTransTypeEnumId" : "AttExternal",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861400000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "YER",
  "lastUpdatedStamp" : 1631861555307
}, {
  "acctgTransId" : "100106",
  "acctgTransTypeEnumId" : "AttPayrollInvoice",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1632811800000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZWD",
  "lastUpdatedStamp" : 1631861567159
}, {
  "acctgTransId" : "100107",
  "acctgTransTypeEnumId" : "AttIncomingPaymentAp",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1632811800000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZMK",
  "lastUpdatedStamp" : 1631861586614
}, {
  "acctgTransId" : "100108",
  "acctgTransTypeEnumId" : "AttIncomingPayment",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZRZ",
  "lastUpdatedStamp" : 1631861594615
}, {
  "acctgTransId" : "100109",
  "acctgTransTypeEnumId" : "AttIncomingPayment",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1632984900000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "UYU",
  "lastUpdatedStamp" : 1631861643809
}, {
  "acctgTransId" : "100110",
  "acctgTransTypeEnumId" : "AttOutgoingPayment",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZMK",
  "lastUpdatedStamp" : 1631861686366
}, {
  "acctgTransId" : "100111",
  "acctgTransTypeEnumId" : "AttAmortization",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "USD",
  "lastUpdatedStamp" : 1631861729107
}, {
  "acctgTransId" : "100112",
  "acctgTransTypeEnumId" : "AttAssetVariance",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631516100000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZRZ",
  "lastUpdatedStamp" : 1631861740402
}, {
  "acctgTransId" : "100113",
  "acctgTransTypeEnumId" : "AttInvoiceInOutAppl",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZMK",
  "lastUpdatedStamp" : 1631861748902
}, {
  "acctgTransId" : "100114",
  "acctgTransTypeEnumId" : "AttInvoiceInOutAppl",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "UYP",
  "lastUpdatedStamp" : 1631861761047
}, {
  "acctgTransId" : "100115",
  "acctgTransTypeEnumId" : "AttIncomingPaymentAp",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1632812100000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "USD",
  "lastUpdatedStamp" : 1631861774302
}, {
  "acctgTransId" : "100116",
  "acctgTransTypeEnumId" : "AttIncomingPaymentAp",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZRZ",
  "lastUpdatedStamp" : 1631861785015
}, {
  "acctgTransId" : "100117",
  "acctgTransTypeEnumId" : "AttAmortization",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "YER",
  "lastUpdatedStamp" : 1631861797388
}, {
  "acctgTransId" : "100118",
  "acctgTransTypeEnumId" : "AttIncomingPaymentAp",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZMK",
  "lastUpdatedStamp" : 1631861806853
}, {
  "acctgTransId" : "100119",
  "acctgTransTypeEnumId" : "AttAmortization",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "UYP",
  "lastUpdatedStamp" : 1631861827040
}, {
  "acctgTransId" : "100120",
  "acctgTransTypeEnumId" : "AttAmortization",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZMK",
  "lastUpdatedStamp" : 1631861835271
}, {
  "acctgTransId" : "100121",
  "acctgTransTypeEnumId" : "AttIncomingPayment",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "USD",
  "lastUpdatedStamp" : 1631861847183
}, {
  "acctgTransId" : "100122",
  "acctgTransTypeEnumId" : "AttAmortization",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZMK",
  "lastUpdatedStamp" : 1631861856909
}, {
  "acctgTransId" : "100123",
  "acctgTransTypeEnumId" : "AttOutgoingPayment",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "ZMK",
  "lastUpdatedStamp" : 1631861871065
}, {
  "acctgTransId" : "100124",
  "acctgTransTypeEnumId" : "AttAmortization",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631861700000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "USD",
  "lastUpdatedStamp" : 1631861878541
}, {
  "acctgTransId" : "100125",
  "acctgTransTypeEnumId" : "AttOutgoingPayment",
  "organizationPartyId" : "UPS",
  "transactionDate" : 1631862000000,
  "isPosted" : "N",
  "glJournalId" : "DefaultSettingsError",
  "glFiscalTypeEnumId" : "GLFT_ACTUAL",
  "amountUomId" : "USD",
  "lastUpdatedStamp" : 1631861886733
} ]
C:\Users\donhuvy>

我在 React 17 中尝试过

服务

    // curl -X GET -H "Authorization: Basic am9obi5kb2U6bW9xdWk=" -i http://localhost:8080/rest/s1/mantle/gl/trans
    // curl -X GET -H "Authorization: Basic am9obi5kb2U6bW9xdWk=" -i http://localhost:8080/rest/s1/mantle/gl/trans?pageIndex=0&pageSize=3
    getAcctgTrans(params) {
        return ....get("http://localhost:8080/rest/s1/mantle/gl/trans?", { params: params } ,{headers:{moquiSessionToken:getTokenCookie()}})
            .then(res => res.data);
    }

    const [totalRecords, setTotalRecords] = useState(0); 

    useEffect(() => {

        fooService.getFoos().then(data => {
            setTableData(data);
            let total = data.headers['X-Total-Count'];
            setTotalRecords(total);
            console.log("tong so record = " +  total);
        });
    }, []);

如何获取X-Total-Count？

Answer 1

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

• 缓存控制
• 内容-语言
• 内容类型
• 过期
• 最后修改
• 编译指示

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

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

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