JavaScript无法获取响应头X-ePages-Cart-Token问题求助

核心原因 #

你遇到的问题是CORS响应头暴露限制导致的：

• 浏览器在跨域请求时，默认只允许前端脚本访问「CORS安全列表内」的响应头（比如Content-Type、Cache-Control等），自定义的X-开头头不在默认列表中。
• access-control-allow-origin: *仅允许跨域请求本身被执行，但不授权前端访问自定义响应头。必须服务器额外返回Access-Control-Expose-Headers头，明确指定哪些自定义头可以被前端读取。

验证依据 #

你的网络面板中能看到x-epages-cart-token头，但代码里拿不到，说明服务器没有配置Access-Control-Expose-Headers来暴露这个头。API支持方测试能拿到，大概率是他们用的是后端请求（不受CORS限制），或者测试环境已经配置了该头。

解决方案 #

1. 服务器端配置（若你有权限）：
   在API响应头中添加：

   Access-Control-Expose-Headers: X-ePages-Cart-Token
   

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

   Access-Control-Expose-Headers: X-ePages-Cart-Token, X-ePages-Media-Type
   

2. 联系API支持方：
   告知他们需要在生产环境的响应中添加Access-Control-Expose-Headers: X-ePages-Cart-Token，否则前端无法读取该令牌。

额外排查点 #

• 无需修改头名称的大小写：HTTP头是大小写不敏感的，response.headers.get("X-ePages-Cart-Token")写法正确，浏览器会自动匹配。
• 检查是否有浏览器插件或请求拦截器修改了响应头，暂时禁用插件重试测试。

你的请求代码： #

const requestUrl = `${url}/carts`;
// Perform the request
try {
    let response = await fetch(requestUrl, {
        method: 'POST',
        headers: {
            'Accept': 'application/vnd.epages.v1+json',
            'Authorization': at,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(body)

    });
    if (!response.ok) {
        const errorText = await response.text();
        console.error('Error:', response.status, errorText);
    } else {
        const data = await response.json();
        cartToken = response.headers.get("X-ePages-Cart-Token");
        console.log('token: ', cartToken);
        console.log('response data:', data); // Log the parsed data
    }
} catch (err) {
    console.error('Request failed:', err);
}

你的响应头（网络面板）： #

HTTP/2 2024 12:58:00 GMT
location: https://shop.com/carts/id
x-epages-cart-token: tokenhere
content-type: application/json
x-epages-media-type: application/vnd.epages.v1+json
x-ratelimit-limit: 300
x-ratelimit-remaining: 299
x-ratelimit-reset: 2024-08-22T12:58:30.800Z
access-control-allow-origin: *
vary: Accept-Encoding,User-Agent
content-encoding: gzip
content-length: 1529

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