Запрос диапазона HTTP не работает, если начальный диапазон не равен нулю

Question

Вот простая демонстрация, которая иллюстрирует мой вопрос: https://funnyballoon.github.io/.

Я строю веб-сайт, данные которого основаны на случайно выбранных объектах, из массива объекта JSON ( Загрузка случайных объектов изогромный (> 200 МБ) файл массива без загрузки всего массива ), и я сохраняю этот массив как статический файл, размещенный на Github.Мой сайт использует Angular.Теперь я пытаюсь использовать запрос диапазона HTTP (https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests) для достижения такого случайного выбора. Это метод, который я использую:

  getPartialText(){
  let path:string='/mock/mockData.json';
  let headers = new HttpHeaders().set('Range', 'bytes=0-123').set('Access-Control-Allow-Origin','*');
  this.http.get(path,{headers:headers, responseType: 'text'}).subscribe((data:any)=>{
    this.secondPartialText=data;
  });
}

Обратите внимание, здесь я установил байты в «0-123», и это работает отлично, поэтому (вероятно) это не проблема CORS. Однако, когда я устанавливаю начало диапазона байтов на любое число, отличное от 0, например, «bytes = 1-123», я получаю ошибку сэто сообщение:

Http ошибка ответа для (неизвестный URL): 0 Неизвестная ошибка

Это очень запутанно. Вот простая демонстрация моего сайта: https://funnyballoon.github.io/. Как вы можете видеть, если вы нажимаете первую кнопку, все работает нормально, тогда как при нажатии второй кнопки появляется ошибка из журнала.

Вот мой код:

app.component.ts

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public firstPartialText;
  public secondPartialText;

  constructor(public http: HttpClient){}

  getFirstPartialText(){
      let path:string='/mock/mockData.json';
      let headers = new HttpHeaders().set('Range', 'bytes=0-123').set('Access-Control-Allow-Origin','*');
      this.http.get(path,{headers:headers,responseType: 'text'}).subscribe((data:any)=>{
      this.firstPartialText=data;
      });}

  getSecondPartialText(){
      let path:string='/mock/mockData.json';
      let headers = new HttpHeaders().set('Range', 'bytes=1-123').set('Access-Control-Allow-Origin','*');
      this.http.get(path,{headers:headers, responseType: 'text'}).subscribe((data:any)=>{
      this.secondPartialText=data;
  });}
}

app.component.html

<div> <button (click)="getFirstPartialText()">Get First</button>      
  {{firstPartialText}}</div>

<div> <button (click)="getSecondPartialText()">Get Second</button>     
  {{secondPartialText}}</div>

Я ценю, если кто-нибудь может указать, что происходитздесь неправильно. Спасибо!