Реакция Axios добавляет окно происхождения к предоставленному URL (json-сервер) - PullRequest
Новая
       40

Реакция Axios добавляет окно происхождения к предоставленному URL (json-сервер)

0 голосов
/ 17 декабря 2018

У меня странное поведение при интеграции API-интерфейса json-сервера с axios.

Я использую json-сервер для обслуживания файла db.json 

json-server --watch db.json --port 4000

и в моем приложении реагированияЯ использую axios для вызова "http://localhost:4000/tasks"

. Тестируя его на почтальоне, API возвращает результаты, и он работает нормально.

, но используя приведенный ниже фрагмент кода (axios), он объединяет оба доменаприложение реагирования и URL-адрес API на запрос. 

try {
        return axios({
            method: 'GET',
            url: `http://localhost:4000/tasks`
        }).then((response) => {
            debugger;
            return response;
        });
    } catch (error) {
        return new Error('Failed to retrieve Tasks');
    }

Я проверяю сеть браузера и запрашиваю URL-адрес, подобный этому

URL-адрес запроса: http://localhost:3000/http//localhost:4000/tasks

и поэтому выдает исключение - 404

Есть идеи, почему это происходит?

Странно то, что когда я использую другой API, например, звездные войны api "https://swapi.co/api/people/1",Это работает как шарм.

Заранее спасибо ...

1 Ответ

0 голосов
/ 18 декабря 2018

Я исправил эту проблему с помощью переменных среды.

Я просто создал файл ".env.development" и добавил "REACT_APP_API_BASEURL = 'http://localhost:4000'".

И затем я использовалэто выглядит следующим образом: 

try {
    return axios({
        method: 'GET',
        url: `${process.env.REACT_APP_API_BASEURL}/tasks`
    }).then((response) => {
        debugger;
        return response;
    });
} catch (error) {
    return new Error('Failed to retrieve Tasks');
}

и работает отлично.

...