使用Javascript上传AWS S3文件

Question

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

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：

<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配置如下。

CORS配置

Answer 1

错误... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource...表明CORS配置错误，但在此特定情况下， -flight检查失败的原因不同：未将请求发送到存储桶的正确S3区域端点。

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

当请求发送到错误的区域时，S3会引发错误。 它实际上返回30X HTTP重定向响应，但该重定向不包含惯用的Location标头，因此它不是浏览器可以遵循的重定向。

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