javascript - "Content-Range"响应 header 对于 JavaScript 不可见

Question

这个问题已经有答案了:

Restrictions of XMLHttpRequest's getResponseHeader()? (2 个回答)

Can’t access cross-origin response header from frontend JavaScript (2 个回答)

已关闭 4 年前。

我有以下代码:

const URL = 'https://www.tophtml.com/snl/15.mp3';
window.addEventListener('load', function() {
	const button_load		= document.querySelector('.button_load');
	button_load.addEventListener('click', async function() {
		let url = URL + '?nocache='+(new Date()).getTime();
		let arrayBuffer = await fetchData(url, 501, 510);
		console.log('This is the response itself:');
		console.log(arrayBuffer);
	});
});
function fetchData(url, byte_from, byte_to) {
	return new Promise((resolve, reject) => {
		var request = new XMLHttpRequest();
		request.responseType = 'arraybuffer';
		request.open('GET', url, true);
		request.setRequestHeader("Range", "bytes=" + byte_from + "-" + byte_to);
		request.onload = function() {
			resolve(request.response);
		}
		request.onreadystatechange = function() {
			if (this.readyState == this.HEADERS_RECEIVED) {
				console.log('These are the "Response Headers" visible to JavaScript:');
				console.log(request.getAllResponseHeaders());
			}
		}		
		request.send();
	});
}

<button class="button_load">Load</button>

您也可以在这里找到:

https://codepen.io/anon/pen/OBJqZG?editors=1010

我的问题是，由于某种原因，Content-Range JavaScript 的响应 header 不可见如下图所示:

知道这里发生了什么吗？

谢谢!

Answer 1

Any idea of what's going on here?

非常简单，content-range 是一个响应 header ，不是请求 header 。可以从客户端使用 XMLHttpRequest.prototype.overrideMimeType 设置的唯一响应 header 是 content-type。

如果通过 Access-Control-Expose-Headers 响应 header 公开，您可以使用以下方式检索它:

request.getResponseHeader('Content-Range')