Как загрузить JSON с помощью fetch?

Question

[Денис]

Хочу через аякс запрос получить JSON файл groups, который находится в проекте. То есть локально. Но срабатывает catch. Пока не могу разобраться из-за чего и как пофиксить

error:  Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

fetch(
            'src/rest/groups.json',
            {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            }
        ).then(responce => {
            console.log('resp: ', responce);
            return responce.json();
        }).then(resp => {
            console.log('resp: ', resp);
        });

или то же самое , но через axios

axios({
            method: 'GET',
            url: 'http://localhost:3000/rest/groups.json'
        }).then(resp => {
            console.log(resp);
        }).catch(e => {
            console.error('error: ', e);
        });

Answer 1

[FeNUMe]

status code 404

Страница не найдена. Проверяйте урл куда запросы шлете.

Comments

[Денис]

шлю на этот адрес: localhost:3000/rest/groups.json, сам файл находится в папке rest, которая в свою очередь в корне проекта. Какой еще адрес указывать в таком случае?

todos
---rest
------groups.json

[Сергей delphinpro]

Денис, вообще-то у вас написано fetch('src/rest/groups.json',
а не fetch('/rest/groups.json',

[FeNUMe]

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

[Денис]

Сергей delphinpro, пробовал и так, и без src - это сути не меняет

[Денис]

FeNUMe, В общем я почитал в инете, там рекомендуют развернуть проект на локальном сервере типа WAMP, Denwer и прочие. Я развернул на денвере. Запустил Денвер, но мне же надо и скрипт от вебпака запустить, то есть npm run dev. Таким образом, я снова таки буду ссылаться с localhost:3000 на адрес json но уже учитывая что он находится на хосте, то есть :

axios({
            method: 'GET',
            url: 'http://sb-teh/rest/groups.json'
        }).then(resp => {
            console.log(resp);
        }).catch(e => {
            console.error('error: ', e);
        });

таким образом, на вкладке Сеть, запрос отрабатывает, и я получаю свою json, но так как браузер видит, что я шлю запрос на другой адрес он мне снова таки вываливает в консоль :
Failed to load sb-teh/rest/groups.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access.

[Денис]

какой - то замкнутый круг получается((

[FeNUMe]

Вы явно "неправильно" используете вебпак, вам нужно с его помощью выполнить сборку фронтенда и уже готовую статику закинуть в папку вебсервера(в денвере).

[Сергей delphinpro]

Денис,

пробовал и так, и без src - это сути не меняет

Как это не меняет??? Это же разные адреса!

локальный сервак для разработки на вебпаке вам не нужен. webpack уже запускает проект на таком сервере.

Единственное что вам нужно — это разобраться с правильным адресом запроса.
Если вы откроете прямо в браузере адрес http://localhost:3000/rest/groups.json он у вас откроется?

[Денис]

Я примерно понял. Но тогда получается в рамках задачи работы с аяксом мне надо будет при каждом изменении в коде запускать скрипт npm run build

[FeNUMe]

Денис, почитайте уже документацию - специально для разработки есть npm run watch, который будет отслеживать изменения в файлах проекта и на лету их пересобирать. Ну а в конфиге проекта пропишите чтобы собиралось сразу в папку вебсервера и спокойно себе работайте через домен.
Хотя Сергей delphinpro прав, должно все работать и на встроенном девсервере, только нужно использовать правильные пути.

[Денис]

Сергей delphinpro, не откроется, я испробовал все варианты

[Сергей delphinpro]

Денис, Значит его там нет. логично? Надо выяснить — почему?

[Сергей delphinpro]

Денис, подозреваю, что файлик вы создали в src директории. Но dev-сервер запускается не из нее, а из билда. Значит нужно скопировать нужные файлы в билд директорию. Донастройте webpack.

[Денис]

FeNUMe, И я так же думал. Сам не пойму, в чем дело. Насчет watch у меня и так вебпак настроен отслеживать изменения в коде. Если не жалко потратить несколько минут, вот ссылка на проект на Хабе: https://github.com/denis862008/test. Разворачивается он в 2 сек. Проблемный участок кода в компоненте src/Components/todos/TodosList... в componentWillMount я использую axios для аякса...

[Денис]

Сергей delphinpro, https://github.com/denis862008/test. Разворачивается он в 2 сек. Проблемный участок кода в компоненте src/Components/todos/TodosList

[Сергей delphinpro]

Денис, сейчас гляну

[FeNUMe]

Денис, у вас вебпак сервит папку public, а вы пытаетесь доступ получить к соседней папке rest.

[Денис]

FeNUMe, Все верно, я тупанул, и совсем забыл про output в вебпак webpack, а также какую папку слушает dev-server. Переместил rest в public и проблема решилась. Спасибо, что направили в нужное русло!

[Денис]

Сергей delphinpro, Туплю я))) Все верно вы сказали, так же как и FeNUMe, dev-server слушает public , соответственно rest скопировал в public и все заработало. Спасибо большое!

[Сергей delphinpro]

Денис, да, просто добавить плагин npm i -D copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');
    ...
    plugins: [
        new CopyWebpackPlugin([{from:"rest", to:"rest"}]), // added
        new webpack.NamedModulesPlugin()
        // new webpack.HotModuleReplacementPlugin()
    ],

[Сергей delphinpro]

но лучше поместить rest всё-таки в папку исходников и

new CopyWebpackPlugin([{from:"src/rest", to:"rest"}]),

[Денис]

Сергей delphinpro, Об этом плагине я не знал. Круто! И еще раз Спасибо!

Answer 2

[Денис]

Только что проверил, если указать url file:///C:/git-repo/todos/rest/groups.json, то 404 не выбивает, но выходит другая ошибка: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Comments

[Сергей delphinpro]

Локальные файлы нельзя загружать джаваскриптом. Безопасность-с.
(хинт: отключается где-то во флагах браузера, если нужно для единоличного использования)