Frontend failed to send request error “net::ERR_CONNECTION_ABORTED”

Frontend is written by HTML. I use JavaScript to send Post request to the backend(written by python)

I want to send the image user commited to python. The python file will process the image and return the processed image to the fontend to display.

My JS code is as follows:

const imageInput = document.getElementById('imageInput');
        const previewImage = document.getElementById('previewImage');
        const TextInput = document.getElementById('upload');
        const submitButton = document.getElementById('submit');
        const noiseCheckbox = document.getElementById('noise');
        const contourCheckbox = document.getElementById('contour');
        const smoothCheckbox = document.getElementById('smooth');
        const styleCheckbox = document.getElementById('style');
        const whitenCheckbox = document.getElementById('whiten');

        submitButton.addEventListener('click', () => {
            // Handle image processing based on selected options
            // Record the order of selected options
            var file = imageInput.files[0];
            var formData = new FormData();
            // alert(file);
            formData.append('image', file);

            fetch('./script/test.py', {
                method: 'POST',
                body: formData,
                timeout: 60000 // 设置超时时间为60秒
            })
            .then(response => response.json())
            .then(data => {
                var resultContainer = document.getElementById('resultContainer');
                resultContainer.innerHTML = '';

                var resultImage = document.createElement('img');
                resultImage.src = data.resultImageUrl;
                resultContainer.appendChild(resultImage);
            })
            .catch(error => console.error('Error:', error));
        });

        imageInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file.size > 1024 * 1024 * 10) {
                alert("文件大小不能超过10MB！");
                input.value = ''; // 清除已选择的文件
            }
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                previewImage.style.display = 'block';
                TextInput.style.display = 'none';
            }
            reader.readAsDataURL(file);
        });

My python file is as follows:

import cv2
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('../index.html', methods=['POST'])
def process_image():
    # 从请求中获取上传的图片文件
    print('Received request from frontend.')
    uploaded_image = request.files['image']

    # 在这里对图片进行处理，这里只是一个示例
    # 这里可以使用图像处理库对图片进行处理
    cv2.imwrite('../result/image.jpg', uploaded_image)
    # 假设处理完成后，将处理后的图片保存到服务器，并返回图片的URL
    processed_image_url = '../result/image.jpg'

    # 返回处理后的图片URL
    return jsonify({'resultImageUrl': processed_image_url})

if __name__ == '__main__':
    app.run(debug=True)

The error message is as follows:

Logos515 / code

Frontend failed to send request error “net::ERR_CONNECTION_ABORTED” #1