AFatum
@AFatum
Начинающий...

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

Всем привет.
У меня проблема с размещением сайта на githubpages.
Все работает на локальном сервере, но при выносе на репозиторий github, по ветке gh-pages, отображается ошибка:
Failed to load resource: the server responded with a status of 404 ()
5d6531d5d228e308351750.png
По по скрипту ошибку отлавливаю. Происходит она при запросе данных. Запрашиваю из локального 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.
5d6536642b7d4529801626.png
Похоже что ошибка в адресе, при исполнении 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 заработал в итоге?

Вот ссылка на репозиторий.
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
AFatum
@AFatum Автор вопроса
Начинающий...
Всем спасибо, решил с помощью этого сервиса, довольно таки полезным оказался.
Думаю, что нужно почитать еще про fetch(), с какими параметрами его можно передавать чтобы включить cross.
Но в итоге получилось с таким вот кодом
return fetch('https://my-json-server.typicode.com/AFatum/ozone-server/db', {mode: 'cors'})


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы