amazons3javascript-No'；访问控制允许原点'；请求的资源上存在标头

我正试图通过以下方式上载我的文件：

console.log("not broken til here");
    scope.inputMemeIsFile=true;
    var bucket = new AWS.S3({params: {Bucket: 'townhall.images'}});
    file = image.file;
    console.log(file);

    var params = {Key: file.name, ContentType: file.type, Body: file};
      bucket.upload(params, function (err, data) {
        var result = err ? 'ERROR!' : 'UPLOADED.';
        console.log(result);
        console.log(err);
      });

但是，我收到以下错误：

XMLHttpRequest cannot load https://s3.amazonaws.com/<BUCKETNAME>/favicon.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:5000' is therefore not allowed access.

---

有人知道怎么了吗？我看过5-6篇类似的帖子，但似乎没有人能解决这个问题

一些浏览器，如Chrome，不支持CORS请求的

localhost

或

127.0.0.1

尝试改用：

http://lvh.me:5000/

有关更多信息，请参阅。

尝试

*

，无需协议

若并没有效果——你们可能在客户端遇到了问题

为了通过浏览器上传文件，您应该确保已经为AmazonS3 bucket配置了CORS，并通过ETag声明公开了“ETag”头

我建议您从开放式测试配置开始，然后根据需要修改它：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

确保您创建的用户正在使用此策略的新组

现在创建一个简单的测试脚本，如amazon上使用的脚本：

HTML

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

---

您是否尝试过指定原点而不是使用通配符。我敢肯定我们过去也有类似的问题

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://127.0.0.1:5000</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

http://127.0.0.1:5000
得到
邮递
放
*

我已经试过了。您能详细说明一下如何解决客户端问题吗？如果您在CORSRules部分中有客户机，您的客户机可能会以某种方式缓存

ZillionSeconds

。即使在客户端缓存了CORS的值后将其删除，浏览器也不会尝试使用OPTIONS请求重新读取CORS，直到ZillionSeconds周期结束。为了确保选项请求，您可以a）清除用户代理缓存，b）Chrome–打开控制台，然后在控制台打开时设置并设置无缓存。我打开了javascript控制台，缓存被删除。只是累了，效果相同。这是一个很好的建议，但我还没有尝试过，还有其他建议吗？这对我来说确实有效。我试着在Safari中使用建议的CORS头，而不是Chrome和voila。这对我很有效。在我了解

http://lvh.me

，我发现

localho.st

，这在我的CORS配置中更具自我记录功能。我也尝试过ETag变体，以及您上面提到的那个，同样的问题。在配置方面…//请参阅在SDK AWS.config.update（{accessKeyId:''，secretAccessKey:''}）中配置凭据的配置部分//AWS.config.region='us-west-2'。知道我做错了什么吗？@user3525295我已经更新了我的答案，给你一个小测试环境。它适用于我的javascript AWS SDK，并允许我上传刚刚好。如果你愿意，我甚至可以把这个例子放在小提琴上，但最终可能会删除用户。@user3525295你的错误似乎是说bucket不在

us-east-1

中。您能否确保请求将发送到美国西部或任何北加利福尼亚州。让我在北加州做一个测试桶，并进行测试。@user3525295我刚刚在北加州进行了测试，它在

AWS.config.region='us-west-1'中运行良好和使用示例CORS配置的存储桶。
<input id="file-chooser" type="file" />
<button id="upload-button">Upload</button>
<p id="results"></p>

// update credentials
var credentials = {accessKeyId: 'new accessKeyId', secretAccessKey: 'new secretAccessKey'};
AWS.config.update(credentials);
AWS.config.region = 'us-west-1';

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

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};
        bucket.upload(params, function (err, data) {
            results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
        });
    } else {
        results.innerHTML = 'Nothing to upload.';
    }
}, false);

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://127.0.0.1:5000</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>