使用Javascript上传AWS S3文件 [英] AWS S3 File upload using Javascript

问题描述

我正在尝试使用JavaScript将图像上传到AWS s3.但是，当我尝试上传它时，出现以下错误.

I'm trying to upload an image to aws s3 using javascript. But when i attempt to upload it, I'm getting the following error.

Failed to load https://demoapp.s3-us-west-2.amazonaws.com/IMG_2484.JPG: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

代码:

<input id="file-chooser" type="file"/>
<button id="upload-button">Upload</button>
<p id="results"></p>

JavaScript:

Javascript :

<script>
var credentials = {
    accessKeyId: 'XXXXX',
    secretAccessKey: 'XXXXXXX'
};
AWS.config.update(credentials);
AWS.config.region = 'us-west-2';

// create bucket instance
var bucket = new AWS.S3({params: {Bucket: 'demoapp'}});

var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function () {
    var file = fileChooser.files[0];
    if (file) {
        results.innerHTML = '';

        var params = {Key: file.name, ContentType: file.type, Body: file, 'Access-Control-Allow-Credentials': '*'};
        bucket.upload(params, function (err, data) {
            results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
        });
    } else {
        results.innerHTML = 'Nothing to upload.';
    }
}, false);

我对CORS进行了如下配置.

I configured the CORS as follows.

CORS配置

推荐答案

错误... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource...提示CORS配置错误，但是在这种特定情况下，飞行前检查由于以下原因而失败:未发送请求到存储桶的正确的S3区域端点.

The error ... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource... suggests a CORS misconfiguration, but in this specific case, the pre-flight check fails for a different reason: the request was not being sent to the correct S3 regional endpoint for the bucket.

S3是一项全局服务，但是每个单独的存储桶都必须存在于S3的一个特定区域中.所有区域都知道所有存储桶的正确位置，但是无法访问它们.只有实际上包含特定存储桶的区域才可以访问该存储桶，因此由于配置错误而到达其他区域的请求将无法处理.

S3 is a global service, but each individual bucket is constrained to exist in one specific region of S3. All regions are aware of the correct location for all buckets, but are not able to access them. Only the region that actually contains a particular bucket has access to that bucket, so requests arriving at other regions due to misconfiguration can't be processed.

将请求发送到错误的区域时，S3会引发错误…….它实际上返回一个30X HTTP重定向响应，但该重定向不包含惯用的Location头，因此浏览器无法遵循该重定向.

When a request is sent to the wrong region, S3 throws an error... sort of. It actually returns a 30X HTTP redirect response, but the redirect does not include the customary Location header, so it isn't a redirect that the browser can follow.

对于当前的问题而言，也许更重要的是，该响应还不包含成功进行飞行前检查所需的CORS响应标头...因此，发送到经过适当配置以支持CORS支持的存储桶的请求仍将无法通过-flight检查请求是否发送到错误的S3区域端点.

Perhaps more important for the issue at hand, that response also does not contain the CORS response headers necessary for a successful pre-flight check... so a request sent to a bucket properly configured for CORS support will still fail the pre-flight check if the request is being sent to the wrong S3 regional endpoint.

这篇关于使用Javascript上传AWS S3文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！