Как правильно указать url-адреса запросов fetch (на js) на githubpages?

Question

[Антон]

Всем привет.
У меня проблема с размещением сайта на githubpages.
Все работает на локальном сервере, но при выносе на репозиторий github, по ветке gh-pages, отображается ошибка:
Failed to load resource: the server responded with a status of 404 ()

По по скрипту ошибку отлавливаю. Происходит она при запросе данных. Запрашиваю из локального json, через fetch:

return fetch('./db/db.json')
    .then(response => {
      if(response.ok){
        return response.json();
      } else throw new Error('Данные не были получены, ошибка: ' + response.status);
    })
    .catch(err => {
      console.warn(err);
      goodsWrapper.innerHTML = `<div style="color: red; font-size: 1.5em">Упс, не получили данные от сервера.<br>${err}</div>`;
    });

Понял что проблема в адресе, начал гуглить, нашел рекомендацию добавить с абсолютным адресом:
<base href="https://afatum.github.io/o-zone/">

добавил, все равно не работает.
Тогда я указал абсолютный путь до json:

const goodsWrapper = document.querySelector('.goods');
  
    return fetch('https://afatum.github.io/o-zone/db/db.json')
...

Все равно не работает.
Причем ошибка уже немного другая:
Access to fetch at 'https://afatum.github.io/db/db.json' from origin '127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Похоже что ошибка в адресе, при исполнении fetch поиск все равно идет по url https://afatum.github.io/db/db.json вместо https://afatum.github.io/o-zone/db/db.json.
ещё пробовал указывать return fetch('o-zone/db/db.json')
Но ошибка та же.
Подскажите пожалуйста, какой правильный адрес нужно указать, чтобы fetch заработал в итоге?

Вот ссылка на репозиторий.

Comments

[Valeron Sergeev]

Во втором случае, вы пытаетесь локально получить файл с сервера, а он вас блочат, т.к. получаете не с родного домена вот и ругается на кроссдоменный запрос

[Игорь]

Вам нужно настроить сервер, ваш адрес запрещён политикой CROSS.

CROSS - совместное использование ресурсов между разными источниками

Другими словами, вас не ждут на том сервере.

[Игорь]

Если делать так return fetch('o-zone/db/db.json'), то вы пытаетесь локально найти файл.
Пробуйте вот так afatum.github.io/o-zone/db/db.json
Без "s"

[vskrsl]

А Вы точно не пытаетесь протестировать что нужно писать в fetch, внося изменения в локальную копию, но запрашивая *.json c github?

Судя по ошибке у Вас запрос с 127.0.0.1:* )

Answer 1

[Антон]

Всем спасибо, решил с помощью этого сервиса, довольно таки полезным оказался.
Думаю, что нужно почитать еще про fetch(), с какими параметрами его можно передавать чтобы включить cross.
Но в итоге получилось с таким вот кодом

return fetch('https://my-json-server.typicode.com/AFatum/ozone-server/db', {mode: 'cors'})

Не думаю что это самый оптимальный вариант, но работает. Еще много чему учится нужно.
Спасибо всем кто помогал.