"Content-Range" 响应 header JavaScript 不可见

Question

我有以下代码：

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 响应 header 对于 JavaScript 不可见，如下图所示：

知道这里发生了什么吗？

谢谢！

Answer 1

Any idea of what's going on here?

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

如果它被 Access-Control-Expose-Headers 响应 header 暴露，您可以使用以下方法检索它：

request.getResponseHeader('Content-Range')

"Content-Range" 响应 header JavaScript 不可见

"Content-Range" response header not visible for JavaScript

html

javascript

xmlhttprequest

httpresponse