Как решить проблему, когда сервер Next.js возвращает HTML вместо JSON?

Question

Любовь

nextjs

Как решить проблему, когда сервер Next.js возвращает HTML вместо JSON?

Привет! Можете помочь мне устранить ошибку? Вот логи, которые я получил при сборке из Dockerfile: 

```
Unhandled Runtime Error
Error: Unexpected token < in JSON at position 0
Source
src/queries/server.ts (76:21) @ async getSiteSettings
74 |
75 | export async function getSiteSettings() {
&gt; 76 | const response = await fetch(`${BASE_URL}/api/setting/`, {
|^
77 | next: { revalidate: 10 },
78 | }).then((res) =&gt; {
79 | if (res.status === 404) {
```

Также вот фрагмент кода из src/queries/server.ts: 

```javascript
import { notFound } from "next/navigation";
import { BASE_URL } from "@/lib/axios";
import {
    authorSchema,
    bankSchema,
    careerSchema,
    companyHistorySchema,
    employeeSchema,
    jumbotronSchema,
    newsListSchema,
    newsRetrieveSchema,
    pageResultSchema,
    partnerSchema,
    projectSchema,
    siteSettingsSchema,
    viewSeoSchema,
    yearSchema,
} from "@/types/schemas";
export async function getSiteSettings() {
    const response = await fetch(`${BASE_URL}/api/setting/`, {
        next: { revalidate: 10 },
    }).then((res) =&gt; {
        if (res.status === 404) {
            notFound();
        }
        return res.json();
    });
    return siteSettingsSchema.array().optional().parse(response);
}
```

Могу ли я получить помощь с этой проблемой?

17 марта 2025 г. 12:04

Ответы на вопрос 1

Похожие вопросы

Answer 1

Конечно! Ошибка, которую вы видите (`Unexpected token < in JSON at position 0`), указывает на то, что вместо JSON-ответа сервер возвращает HTML. Это часто происходит, когда вы пытаетесь обратиться к URL, который не соответствует ожидаемому API-эндпоинту, или когда сервер возвращает страницу ошибки (например, 404 или 500) в формате HTML.

Давайте разберем потенциальные причины и решения этой проблемы:

1. **Неправильный URL или конечная точка**:
   Убедитесь, что переменная `BASE_URL` правильно настроена и указывает на ваш сервер API. Попробуйте вручную проверить, доступен ли эндпоинт `${BASE_URL}/api/setting/`.

2. **Серверная ошибка**:
   Проверьте логи вашего сервера (или используйте инструменты для разработки, чтобы увидеть ответ сервера). Эндпоинт может возвращать HTML-страницу ошибки (например, 404 или 500). Убедитесь, что API возвращает корректные данные в формате JSON и нет серверных ошибок.

3. **Обработка ошибок в коде**:
   Ваш код обрабатывает статус 404, но не учитывает другие статусы, которые могут возникнуть. Попробуйте добавить более широкую обработку ошибок:

   ```javascript
   export async function getSiteSettings() {
       const response = await fetch(`${BASE_URL}/api/setting/`, {
           next: { revalidate: 10 },
       });

       if (!response.ok) {
           // Для дополнительной информации о статусе
           console.error(`Ошибка при обращении к API: ${response.status}`);
           notFound(); // Это остановит дальнейшее выполнение, если данные не найдены
       }

       const data = await response.json(); // Попробуем распарсить ответ

       return siteSettingsSchema.array().optional().parse(data);
   }
   ```

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

   ```javascript
   const responseText = await response.text();
   console.log(responseText); // Это поможет вам увидеть, что именно возвращает ваш API
   ```

5. **Проверка конфигурации сервера**:
   Если вы используете Docker, убедитесь, что ваш API сервер действительно запущен и доступен. Порты могут быть неправильно прокинуты или не созданы в `Dockerfile` или `docker-compose.yml`.

6. **Кросс-доменные запросы (CORS)**:
   Если вы обращаетесь к API с другого домена, убедитесь, что сервер настроен для обработки запросов CORS.

Попробуйте эти шаги и проверьте, все ли работает корректно. Если проблема останется, поделитесь дополнительными логами или информацией о конфигурации вашего сервера.