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

[Anonymous]

Вопрос:
Я работаю над приложением React, которое захватывает 30-секундное видео с камеры пользователя, а затем загружает его в конечную точку API для анализа показателей работоспособности. Бэкэнд построен с использованием FastAPI и поддерживает CORS. При тестировании одного и того же API с помощью Python или Postman все работает отлично, но в моем приложении React загрузка в реальном времени постоянно не выполняется, НО загрузка файла с устройства работает.
Примечание: я бэкэнд-разработчик с небольшими знаниями в React/Frontend. . Я пытаюсь понять, что не так, поскольку наши ребята из внешнего интерфейса испытывают трудности.

Настройка:

• Внешний интерфейс : React с использованием Axios для обработки загрузки видео.
• Бэкенд: FastAPI с CORSMiddleware, настроенным дляallow_origins=["*"] .
• Тестирование:
  • Python и >Postman успешно загрузил видео со всеми необходимыми параметрами.
  • React постоянно завершается с ошибками, иногда связанными с CORS или сетью.

Настройка внутреннего CORS (FastAPI):

Код: Выделить всё

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
CORSMiddleware,
allow_origins=["*"],  # Allows all origins
allow_credentials=False,
allow_methods=["*"],
allow_headers=["*"],
)

Код React (App.js):

Я использую Axios для HTTP-запроса:

Код: Выделить всё

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:", response.data);
} catch (error) {
console.error("Error uploading video:", error);
}
};

Моя среда:

• React: 10.8.1
• FastAPI: fastapi==0.112.0
• Тестирование в Chrome с включенным и отключенным CORS, но безуспешно в React.

Проблема:

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

Что мы пробовали:

• Тестирование почтальона: отлично работает с теми же заголовками и полезной нагрузкой.< /li>
  Сценарий Python: также отлично работает с настройкой библиотеки запросов.
• Промежуточное программное обеспечение CORS: Двойное -проверены настройки CORS в FastAPI, чтобы разрешить все источники, методы и заголовки.
• Конфигурация Axios: добавлено withCredentials: false для согласования с настройки CORS бэкэнда и указаны Content-Type как multipart/form-data.

Есть какие-нибудь сведения о том, что может быть причиной этой проблемы? Потенциально ли это проблема с зависимостями React, Axios или чем-то еще в моей настройке CORS?

Подробнее здесь: https://stackoverflow.com/questions/791 ... -cors-or-a