跨域请求无法获取自定义响应头Some-Header问题求助

问题背景 #

我从跨域端点获取数据时，需要提取自定义响应头Some-Header中的信息。服务器已将该头添加至Access-Control-Allow-Headers中，响应头信息如下：

Some-Header: attachment; filename="some-name.tar"
Access-Control-Allow-Headers: Some-Header

Date: Thu, 03 Nov 2022 17:11:04 GMT
Content-Type: application/octet-stream
Transfer-Encoding: chunked
Connection: keep-alive
X-Request-ID: d331a838-b22b-41c1-a5c9-bf3461129a97
Access-Control-Allow-Origin: *
X-RateLimit-Limit: 50
X-RateLimit-Remaining: 49
X-RateLimit-Reset: 1667495466
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block

但客户端通过以下代码尝试获取该头时，仅能拿到部分默认响应头，无法获取Some-Header：

function fetchData(path, options) {
    return fetch(`${API_URL}${path}`, options)
        .then(parseResponse(path));
}

const response = yield call(
    fetchData,
    url,
    requestOptions,
);

console.log(response.headers && Array.from(response.headers))

控制台返回结果：

[
    [
        "cache-control",
        "no-store, no-cache, must-revalidate, proxy-revalidate"
    ],
    [
        "content-type",
        "application/octet-stream"
    ],
    [
        "expires",
        "0"
    ],
    [
        "pragma",
        "no-cache"
    ]
]

问题根源 #

你搞混了两个CORS响应头的作用：

• Access-Control-Allow-Headers：用来指定客户端发送请求时允许携带的自定义请求头，和响应头能否被客户端读取完全无关。
• 要让自定义响应头能被跨域请求的客户端获取，必须使用Access-Control-Expose-Headers，把需要暴露的响应头明确列出来。

解决步骤 #

1. 修改服务器配置：在响应中添加Access-Control-Expose-Headers头，将Some-Header包含进去。示例响应头需新增：

Access-Control-Expose-Headers: Some-Header

如果需要暴露多个自定义头，用逗号分隔即可：

Access-Control-Expose-Headers: Some-Header, X-Request-ID, X-RateLimit-Limit

2. 客户端读取头信息：服务器配置完成后，客户端可以直接通过response.headers.get('Some-Header')获取对应值，比如修改你的parseResponse函数：

function parseResponse(path) {
    return function(response) {
        // 获取自定义响应头
        const someHeaderValue = response.headers.get('Some-Header');
        console.log('Some-Header内容:', someHeaderValue);
        // 继续处理其他响应逻辑
        return response;
    };
}

这样修改后，客户端就能正常读取到Some-Header的内容了。

内容的提问来源于stack exchange，提问作者Yumie