Событие XHR onprogress не работает при подключении HTTPS

Question

У меня есть настройки для загрузки файлов в AWS S3 через Angular 7 и Node.Js.Загрузка работает отлично.Но есть проблема с событием xhr.upload.onprogress.

Это событие вызывается только при размещении сервера через http.При использовании соединения https событие не запускается ни разу.

Я протестировал его на heroku и своем экземпляре EC2 и пришел к выводу, что работает только http.Поэтому мое производственное приложение, размещенное на AWS через https, также не работает.

Вот код (напишите комментарий, если требуется более подробная информация):

Angular Service (Frontend)

const xhr = new XMLHttpRequest();
let progress = 0;
xhr.upload.onprogress = (event: ProgressEvent) => {
    console.log('xhr on upload', event);
    if (event.lengthComputable) {
        progress = 100 * (event.loaded / event.total);
        console.log('file upload progress', { progress, file });
    }
};
xhr.responseType = 'json';
xhr.open('POST', `${API_URL}/${this.API_PATH}/upload`, true);
xhr.setRequestHeader('authorization', this.authService.getAuthToken());
xhr.send(payload);
xhr.onload = () => {
    observer.next(xhr.response);
    observer.complete();
    alive = false;
};

Node.Js

module.exports = async (req, res) => {
    try {
        const busboy = new Busboy({ headers: req.headers })
        busboy.on('finish', async () => {
            const fileData = req.files.file
            const fileId = req.body.fileId
            await uploadToAws(fileData)
            // ...
        })
        req.pipe(busboy)
    } catch (err) { /* ... */ }
}
const uploadToAws = async (fileData, file) => {
    return new Promise((resolve, reject) => {
        const params = {
            Body: fileData.data,
            Bucket: awsConfig.buckets.drakery,
            ContentType: fileData.mimetype,
            Key: `mykey`,
            StorageClass: 'ONEZONE_IA',
        }
        awsConfig.s3
        .upload(params, (err, data) => err ? reject(err) : resolve(data.Location))
        .on('httpUploadProgress', function (evt) {
            console.log('httpUploadProgress', evt);
        })
})

Я действительно смущен, почему это происходит.Я не смог найти никаких ресурсов в Интернете по этой проблеме.

Я очень благодарен за любую помощь!

Спасибо

Answer 1

это мой основной js-код, который я использовал для веб-проекта:

        ...
        var xhr = new XMLHttpRequest();

        xhr.upload.addEventListener("progress", uploadProgress, false);

        xhr.addEventListener("load", uploadComplete, false);

        xhr.addEventListener("error", uploadFailed, false);

        xhr.addEventListener("abort", uploadCanceled, false);

        xhr.open("POST", "/controller");
        // fd : formData
        xhr.send(fd);

    }

    function uploadProgress(evt) {

        if (evt.lengthComputable) {

            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            ...
        }

        else {

            ...
        }

    }

Как вы можете видеть, я добавляю прослушиватель событий в «progress», я не перезаписываю другойфункция обратного вызова, как вы делаете с (=) (возможно, https использует другой обратный вызов и перезапись onprogress, как вы делаете, обратный вызов не работает должным образом):

xhr.upload.onprogress = (event: ProgressEvent) => {
    console.log('xhr on upload', event);
    if (event.lengthComputable) {
        progress = 100 * (event.loaded / event.total);
        console.log('file upload progress', { progress, file });
    }
};

Попробуйте, надеюсь, это поможет вам, естьхороший день