使用Javascript上传图片至AWS S3遇CORS跨域错误求助

嘿，我之前也碰到过一模一样的问题，咱们一步步来排查修复：

问题重现 #

我用JavaScript尝试上传图片到AWS S3时，弹出了这个错误：

无法加载https://demoapp.s3-us-west-2.amazonaws.com/IMG_2484.JPG：预检请求未通过访问控制检查，请求资源上不存在'Access-Control-Allow-Origin'响应头，因此源地址'http://localhost:63342'被拒绝访问。

我的代码 #

HTML部分 #

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

JavaScript部分 #

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);

修复方案 #

1. 修正S3桶的CORS配置 #

核心问题是你的S3桶CORS规则没正确放行你的前端源地址。你需要在AWS控制台找到对应桶的CORS配置，替换成类似下面的规则：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "OPTIONS"],
        "AllowedOrigins": ["http://localhost:63342"],
        "ExposeHeaders": ["ETag"]
    }
]

• AllowedOrigins：必须明确写你的前端地址（比如本地的http://localhost:63342），别图省事用*——如果后续要带凭证的话，*是不生效的
• AllowedMethods：一定要包含PUT（上传操作依赖这个方法）和OPTIONS（浏览器预检请求会用这个方法）
• AllowedHeaders：允许所有头部或者你实际用到的（比如Content-Type）

2. 清理代码里的无效参数 #

你在上传params里加了'Access-Control-Allow-Credentials': '*'，这个是S3应该返回的响应头，不是你作为请求参数传进去的，直接删掉这个参数就行，不然反而会干扰请求。

3. 等待配置生效并测试 #

修改完CORS配置后，记得点击保存，然后等个1-2分钟（S3的CORS更新偶尔会有延迟），再重新测试上传。这时候预检请求应该就能通过，图片也能正常上传了。

内容的提问来源于stack exchange，提问作者Nimesha Buddhika Peiris