React приложение не может загрузить видео в API, но работает с Python/Postman – проблема с CORS или Axios?

Вопрос или проблема

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Разрешает все источники
    allow_credentials=False,
    allow_methods=["*"],
    allow_headers=["*"],
)

import axios from "axios";

const uploadVideo = async () => {
    const formData = new FormData();
    formData.append("gender", "Male");
    formData.append("diabetes", "false");
    formData.append("height", 178);
    formData.append("name", "tony");
    formData.append("weight_unit", "kgs");
    formData.append("smoke", "false");
    formData.append("weight", 79);
    formData.append("height_unit", "cm");
    formData.append("age", 25);
    formData.append("video", videoBlob, "recording.webm");

    try {
        const response = await axios.post(
            "https://link/process-video/",
            formData,
            {
                headers: {
                    "Content-Type": "multipart/form-data",
                },
                withCredentials: false,
            }
        );
        console.log("Ответ:", response.data);
    } catch (error) {
        console.error("Ошибка при загрузке видео:", error);
    }
};

Ответ или решение

Проблема с загрузкой видео из React на API: CORS или Axios?

Вы столкнулись с сложной ситуацией, когда ваше приложение на React не может загрузить видео на API, тогда как аналогичные запросы с помощью Python или Postman работают безупречно. Данная проблема, как вы правильно заметили, может быть связана с несколькими факторами, включая CORS и настройки Axios. Давайте детально разберемся в ваших проблемах и выявим возможные пути их решения.

Краткий обзор вашего окружения

1. Frontend: React с использованием Axios для загрузки видео.
2. Backend: FastAPI, который настроен на использование CORS для разрешения всех источников.
3. Мониторинг: Python и Postman успешно выполняют загрузку видео, в то время как запросы из React часто заканчиваются неудачей с ошибками, связанными с CORS или сетевыми запросами.

Возможные причины проблемы

1. Настройки CORS:

   • Ваше API, судя по предоставленному коду, корректно настроено с использованием CORS, что позволяет запросам из любых источников. Однако стоит проверить, действительно ли браузер видит корректный заголовок Access-Control-Allow-Origin в ответах. Можете воспользоваться инструментами разработчика в браузере для анализа сетевых запросов и их ответов.

2. Axios и передаваемые заголовки:

   • В вашем запросе в React используется заголовок Content-Type: multipart/form-data. Обычно, при использовании FormData браузер автоматически устанавливает корректные заголовки, включая Content-Type. Попробуйте удалить эту строку из заголовков, так как это может привести к конфликту, где Axios не будет правильно управлять заголовками.

3. Размер файла и ограничения:

   • Проверьте, нет ли ограничений на размер нагрузки данных на стороне вашего API. Если загружаемое видео превышает предельно допустимый размер, API может отвергать запрос без явной ошибки, что потребует отладочных мероприятий на стороне FastAPI.

4. Закодированные ошибки:

   • Ваша обработка ошибок в React также может быть улучшена. Попробуйте вывести error.response в консоль, чтобы получить более четкое понимание того, что именно вызывает сбой:

     catch (error) {
     if (error.response) {
         console.error("Error response data:", error.response.data);
         console.error("Error response status:", error.response.status);
     } else {
         console.error("Error uploading video:", error.message);
     }
     }

Рекомендованные шаги для диагностики и устранения

1. Проверьте заголовки:

   • Убедитесь, что сервер действительно отправляет заголовки CORS и что они проставляются корректно. Используйте инструменты разработчика в браузере для анализа ответа сервера на CORS-запросы.

2. Удалите Content-Type:

   • Попробуйте убрать заголовок Content-Type из вашего axios-запроса, чтобы дать браузеру самостоятельно управлять этим заголовком.

3. Отладка запроса:

   • Используйте дополнительные логи в вашем React-коде, чтобы отследить, как именно происходит ошибка. Это может помочь вам понять, на каком этапе нагрузка данных перестает быть корректной.

4. Логи на стороне FastAPI:

   • Также имеет смысл добавить логи на стороне FastAPI, чтобы вы могли видеть, получаете ли вы запрос вообще и что происходит, когда он обрабатывается.

Заключение

Проблемы с загрузкой видео из React могут возникать по множеству причин, и основными подозреваемыми здесь являются настройки CORS, конфликты заголовков в Axios и возможные ограничения на стороне сервера. Используя описанные меры диагностики и устраняя каждый элемент по очереди, вы сможете сузить круг поиска и найти решение. Удачи в отладке вашего приложения!