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 configuration

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配置错误，但在这种特定情况下，飞行前检查失败的原因不同：请求未被发送到存储桶的正确S3区域端点。

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

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

对于手头的问题可能更重要的是，该响应也不包含成功的飞行前检查所需的CORS响应头...因此发送到正确配置为CORS支持的存储桶的请求仍将失败-flight检查请求是否被发送到错误的S3区域端点。

使用Javascript上传AWS S3文件

1 个答案: