Почему браузер не выполняет запрос GET? 

Здравствуйте! У меня возникла проблема с выполнением запроса GET в RTK QUERY, при этом я использую библиотеку UMAMI для аналитики. 

Я выполняю следующий запрос с помощью curl:<br/> 
<pre><code>curl -X GET "https://api.umami.is/v1/websites/WEBSITEID/stats?startAt=1734739200000&amp;endAt=1735603199000"   -H "Accept: application/json"   -H "x-umami-api-key:  API_KEY"</code></pre> 

Запрос выполняется успешно, однако когда я пытаюсь реализовать его в коде следующим образом:<br/><pre><code class="javascript">import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseUrl = 'https://api.umami.is/v1/websites/'; 
const API_KEY = '---';
const WEBSITE_ID = '----'

export const umamiApi = createApi({
    reducerPath: 'umamiApi',
    baseQuery: fetchBaseQuery({
        baseUrl: baseUrl + `${WEBSITE_ID}`,
        prepareHeaders: (headers) =&gt; {
            headers.set('Accept', 'application/json');
            headers.set('x-umami-api-key', API_KEY); 
            return headers;
        },
    }),
    endpoints: (builder) =&gt; ({
        getEventSeries: builder.query({
            query: ({ startAt, endAt }) =&gt; ({
                url: `/stats?startAt=${startAt}&amp;endAt=${endAt}`,
                method: "GET"
            }),
        }),
    }),
});
//      return `/stats?startAt=${startAt}&amp;endAt=${endAt}`;
export const { useGetEventSeriesQuery } = umamiApi;</code></pre> 

Я получаю ошибку в консоли браузера:<br/><pre><code>dashboard.analytics.tsx:27 Error: 
{status: 'FETCH_ERROR', error: 'TypeError: Failed to fetch'}
error
: 
"TypeError: Failed to fetch"
status
: 
"FETCH_ERROR"</code></pre>

Можно ли получить помощь по этой проблеме? Кто-либо сталкивался с подобной ситуацией и знает, как её решить?
  • 21 декабря 2024 г. 20:43
Ответы на вопрос 1 
Ошибка `FETCH_ERROR` и сообщение `TypeError: Failed to fetch` в вашем случае могут возникать по нескольким причинам. Рассмотрим наиболее распространенные из них и возможные решения:

1. **CORS (Cross-Origin Resource Sharing)**: 
   - Браузеры при выполнении запросов к другим доменам проверяют политику CORS. Если сервер не настроен для обработки CORS, браузер не позволит сделать запрос, даже если он будет успешен в cURL. Убедитесь, что сервер API (в вашем случае Umami) поддерживает CORS и правильно настраивает заголовки для вашего домена.

2. **Неправильный URL или параметры**:
   - Проверьте формирование URL. Одна из ошибок может заключаться в использовании `&amp;` вместо `&` в параметрах URL. В вашем коде:
     ```javascript
     url: `/stats?startAt=${startAt}&amp;endAt=${endAt}`,
     ```
     Должно быть:
     ```javascript
     url: `/stats?startAt=${startAt}&endAt=${endAt}`,
     ```

3. **API ключ**:
   - Убедитесь, что ваш API ключ действителен и имеет разрешения для выполнения запрашиваемых действий.

4. **Конфигурация сети**: 
   - Если вы используете локальный сервер для разработки, убедитесь, что сеть и сервер настроены правильно и доступны.

5. **Проблемы с браузером**:
   - Иногда проблема может быть связана с конкретным браузером или его настройками (например, расширениями, блокировщиками рекламы). Попробуйте выполнить запрос в другом браузере или отключить расширения.

6. **Ошибки в коде**:
   - Убедитесь, что ваш код для вызова API и код компонента, использующего данный запрос, правильно написан и не содержит ошибок.

Пример правильно написанного кода:

```javascript
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseUrl = 'https://api.umami.is/v1/websites/';
const API_KEY = '---';
const WEBSITE_ID = '----';

export const umamiApi = createApi({
    reducerPath: 'umamiApi',
    baseQuery: fetchBaseQuery({
        baseUrl: baseUrl + `${WEBSITE_ID}`,
        prepareHeaders: (headers) => {
            headers.set('Accept', 'application/json');
            headers.set('x-umami-api-key', API_KEY);
            return headers;
        },
    }),
    endpoints: (builder) => ({
        getEventSeries: builder.query({
            query: ({ startAt, endAt }) => `/stats?startAt=${startAt}&endAt=${endAt}`,
        }),
    }),
});

export const { useGetEventSeriesQuery } = umamiApi;
```

Если все еще не удается решить проблему, попробуйте отладить запрос в сети браузера (вкладка «Network») и посмотрите, какие заголовки отправляются, а также что возвращает сервер. Это может дать больше информации о том, что идет не так.
Похожие вопросы
    Показать ещё