Ошибка Axios при выполнении POST-запроса .txt файла

Я работаю над проектом с Flask и React, и в данный момент я разрабатываю конечную точку API, которая позволяет получать .txt файл от фронтенда, после чего запускается скрипт, анализирующий данные из этого .txt и сохраняющий графики, связанные с анализом.

Вот конечная точка API на бэкенде:

@analysis_ns.route('/upload', methods=["POST", "GET"])
class ChatAnalysisUploadResource(Resource):
    def get(self):
        return {"message": "Эта конечная точка предназначена только для загрузки файлов через POST."}, 405

    #@jwt_required()
    def post(self):
        """Загрузите файл чата, обработайте его и верните URLs изображений"""
        try:
            if 'file' not in request.files:
                abort(400, description="Не указана часть файла")

            file = request.files['file']

            if file.filename == '':
                abort(400, description="Не выбран файл")

            if file and allowed_file(file.filename):
                filename = secure_filename(file.filename)
                file_path = os.path.join(UPLOAD_FOLDER, filename)
                file.save(file_path)

                # Обработайте файл и создайте изображения
                process_chat_file(file_path)

                image_paths = ['static/mensajes_enviados.png', 'static/emojis.png']
                missing_images = [path for path in image_paths if not os.path.exists(path)]

                if missing_images:
                    abort(500, description=f"Изображение не найдено: {missing_images}")

                image_urls = {
                    'urls': [
                        url_for('static', filename="mensajes_enviados.png", _external=True),
                        url_for('static', filename="emojis.png", _external=True)
                    ]
                }

                # Сохраните результаты в базе данных
                result_summary = ";".join(image_urls['urls'])
                new_analysis = ChatAnalysisResults(
                    chat_name=filename,
                    result_summary=result_summary
                )
                new_analysis.save()

                return jsonify(image_urls), 200

            abort(400, description="Тип файла не разрешен")

        # Поймайте ошибку и верните сериализуемое сообщение
        except Exception as e:
            return jsonify({"error": str(e)}), 500

А вот React-компонент, который обрабатывает загрузку документа (я не очень хорош в React):

import { useState } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import '../App.css'

function UploadForm({ setImages }) {
    const [file, setFile] = useState(null);
    const [response, setResponse] = useState('');
    const [loading, setLoading] = useState(false);

    const handleFileChange = (event) => {
        setFile(event.target.files[0]);
    };

    const handleUpload = async () => {
        if (!file) {
            alert("Пожалуйста, выберите файл чата для загрузки.");
            return;
        }

        const formData = new FormData()
        formData.append('file', file) // Изменено с 'chat_file' на 'file'

        setLoading(true) // Начинает анимацию загрузки
        setImages([])   // Очищает предыдущие результаты
        setResponse('') // Необязательно: очищает сообщение ответа

        console.log('Загрузка началась');

        try {
            const response = await axios.post('http://127.0.0.1:8080/analysis/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });

            console.log('Данные ответа:', response.data);

            setImages(response.data.urls);
            setResponse('Файл чата успешно проанализирован');
        } catch (error) {
            console.error('Ошибка при загрузке файла:', error);
            setResponse('Ошибка при загрузке файла: ' + (error.response ? error.response.data.error : error.message));
        } finally {
            setLoading(false); // Останавливает анимацию загрузки независимо от результата
            console.log('Загрузка завершена');
        }
    }

    return (
        <div className="upload-form">
            <input type="file" onChange={handleFileChange} accept=".txt" />
            <button onClick={handleUpload}>
                {loading ? 'Анализирую' : 'Проанализировать чат'}
            </button>
            {response && <p>{response}</p>}
            {loading && (
            <div className="loading">
                <div className="spinner"></div>
            </div>
            )}
        </div>
    )
}

UploadForm.propTypes = {
    setImages: PropTypes.func.isRequired, 
}

export default UploadForm

И вот ошибка, которую я получаю в консоли:

Кроме того, ошибка, которую я вижу в терминале VSCode, следующая:

  File "/opt/anaconda3/lib/python3.11/json/encoder.py", line 180, in default
    raise TypeError(f'Объект типа {o.__class__.__name__} '
TypeError: Объект типа Response не может быть сериализован в JSON

Все конечные точки API до сих пор работают правильно, за исключением этой, я уже запутался с этой проблемой на протяжении недели и мне нужна помощь. Если вам нужна дополнительная информация или вы хотите увидеть другие части/скрипты проекта, не стесняйтесь спрашивать 🙂

Я вижу, что в вашем коде есть ошибка политики CORS. Она возникает из-за того, что вы работаете с двумя разными URL-адресами, один для бэкенда и один для фронтенда, и для ее решения вам нужно внести изменения в ваш код Flask. Установите пакет flask_cors и затем импортируйте модули из него;

from flask_cors import cross_origin  #для конкретного маршрута
from flask_cors import CORS  #для всего приложения

после импорта

analysis_ns = Flask(__name__)  #вы, возможно, сделали это в начале вашего кода
CORS(analysis_ns)  #для включения CORS в все приложение, определите его в начале вашего кода

#остальная часть вашего кода

@analysis_ns.route('/upload', methods=["POST", "GET"])
@cross_origin  #для включения CORS для конкретного маршрута

#остальная часть вашего кода

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