AWS Cloudfront Link не работает через Интернет

Question

Я использую AWS S3 и Cloudfront для хранения изображений и рендеринга изображений на веб-странице.Мне удалось создать подписанный URL-адрес с помощью Cloudfront для визуализации объектов S3.

Проблема в том, что я пытался прикрепить этот подписанный URL в тег для тега href = ''.Я надеялся, что, когда пользователи нажмут на ссылку, она направит их к изображению через Интернет.Вместо этого файл загружается, когда пользователь нажимает на ссылку.

Как создается ключ фотографии

var photoKey = $ctrl.clientDetail["_id"] + '/' + fileName;

Я создал подкаталог для каждого пользователя и сохранил файл в соответствующем подкаталоге.

Моя функция загрузки в AngularJS

s3.upload({
                        Key: photoKey,
                        Body: file,
                        ACL: 'public-read',
                        Metadata: {
                            'id': $ctrl.clientDetail["_id"],
                            'phone': $ctrl.phone
                        }
                    }, function(err, data){
                        if (err) {
                            $scope.uploadedFail = true;
                            console.log(err)
                            genericServices.setErrorInfo($scope.configErrorAddDocAlert, addDoc_reason);
                        }
                        else {
                            $scope.uploadedSuccess = true;
                            genericServices.setSuccessInfo($scope.configSuccessAddDocAlert, addDoc_success);
                        }
                    }
                );

Что мне показалось интересным, так это то, что когда я вручную загружал файл в подкаталог в консоли AWS S3, сгенерированный URL мог обслуживать файлчерез интернет.

Как мне сделать так, чтобы Объект внутри корзины был не загружаемым файлом, а ссылкой?

Answer 1

Для тех, кто сталкивался с такой же проблемой, вот решение.

При загрузке укажите тип контента.

S3 Процесс загрузки изменен

s3.upload({
                        Key: photoKey,
                        Body: file,
                        ContentType: file.type,
                        Metadata: {
                            'id': $ctrl.clientDetail["_id"],
                            'phone': $ctrl.phone
                        }
                    }, function(err, data){
                        if (err) {
                            $scope.uploadedFail = true;
                            console.log(err)
                            genericServices.setErrorInfo($scope.configErrorAddDocAlert, addDoc_reason);
                        }
                        else {
                            $scope.uploadedSuccess = true;
                            genericServices.setSuccessInfo($scope.configSuccessAddDocAlert, addDoc_success);
                        }
                    }
                );

Изначально типом был application / octet-stream, поэтому его можно было загружать только.

Спасибо вам @ michael-sqlbot за комментарий