Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/470.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用angular js直接从浏览器上传图像到amazon s3_Javascript_Angularjs_Amazon Web Services_Amazon S3 - Fatal编程技术网

Javascript 使用angular js直接从浏览器上传图像到amazon s3

Javascript 使用angular js直接从浏览器上传图像到amazon s3,javascript,angularjs,amazon-web-services,amazon-s3,Javascript,Angularjs,Amazon Web Services,Amazon S3,我已经编写了直接使用浏览器中的angular js将图像上传到AmazonS3的代码。为此,我使用了aws-sdk.js库。我有一个“上传”功能,在其中我分配凭证、参数和文件。上传时,我得到以下错误 *No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access*. 我的CO

我已经编写了直接使用浏览器中的angular js将图像上传到AmazonS3的代码。为此,我使用了aws-sdk.js库。我有一个“上传”功能,在其中我分配凭证、参数和文件。上传时,我得到以下错误

 *No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access*.
我的CORS配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://*</AllowedOrigin>
        <AllowedOrigin>https://*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
function _upload($files) {
    $scope.file = $files[0];
    $scope.creds = {
        accessKeyId: '...',
        secretAccessKey: '...',
        region: 'us-west-2',
        bucket: 'sabari-test'
    };


    var bucket = new AWS.S3({
        region: 'us-west-2',
        credentials: new AWS.Credentials($scope.creds.accessKeyId, $scope.creds.secretAccessKey)
    });

    if ($scope.file) {
        // Perform File Size Check First
        var fileSize = Math.round(parseInt($scope.file.size));
        if (fileSize > $scope.sizeLimit) {
            console.log('Sorry, your attachment is too big.');
            return false;
        }
        // Prepend Unique String To Prevent Overwrites
        var uniqueFileName = 'hai' + '-' + $scope.file.name;

        var params = {
            Bucket: $scope.creds.bucket,
            Key: uniqueFileName,
            ContentType: $scope.file.type,
            Body: $scope.file,
            ServerSideEncryption: 'AES256'
        };

        bucket.putObject(params, function(err, data) {
            if (err) {
                console.log(err.message);
                return false;
            } else {
                // Upload Successfully Finished
                console.log('File Uploaded Successfully');
            }
        })
    } else {
        // No File Selected
        console.log('Please select a file to upload');
    }
}
我的存储桶中的文件-公开-crossdomain.xml

<cross-domain-policy>
<allow-access-from domain="*" secure="false"/>
</cross-domain-policy>


我需要做什么设置来消除第一个错误?谢谢。

为了消除错误,我必须安装cors

npm安装cors

除此之外,我在我所在的地区犯了一个错误,设置为us-east-1,这是较早的us-west-2