I use following code to make range request to some large model file on the server, and then display the model using Cesium:
const m = 1024 * 1024 * 3;
Axios({
url: option.url,
method: 'head'
}).then((res) => {
const size = Number(res.headers['content-length']);
const length = parseInt(size / m);
const arr = []
for (let i = 0; i < length; i++) {
let start = i * m;
let end = (i == length - 1) ? size - 1 : (i + 1) * m - 1;
arr.push(this.downloadRange(option.url, start, end, i))
}
Promise.all(arr).then(res => {
const arrBufferList = res.sort(item => item.i - item.i).map(item => new Uint8Array(item.buffer));
const allBuffer = this.concatenate(Uint8Array, arrBufferList);
primitive = viewer.scene.primitives.add(
new Cesium.Model({
gltf: allBuffer,
show: true, // default
modelMatrix: modelMatrix,
scale: parseFloat(option.scale) || 1,
})
);
})
})
The downloadRange method goes like this:
downloadRange(url, start, end, i) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
req.open("GET", url, true);
req.setRequestHeader("range", `bytes=${start}-${end}`);
req.responseType = "blob";
req.onload = function (oEvent) {
req.response.arrayBuffer().then((res) => {
resolve({
i,
buffer: res,
});
});
};
req.send();
});
}
When the m(range size) is smaller than about 1024*1024*6 (about 6mb), the request would be returned successfully, however when m is larger than that, the browser would say GET <url> net::ERR_FAILED 206 (Partial Content) and the request would fail. When I use postman to test the service it would return normally with a much larger size(30mb) so there should be no problem on the server side. I wonder what would cause this? Is there some kind of limit on chromium? Is there any way to get around it? Thanks for any reply in advance.
This would happen both on Chrome and Edge, and maybe other browsers.