Aws-sdk-js: When trying to upload a file to S3 in the browser, get a CORS error.

[Tombert]

http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-examples.html

Following the file upload example, modified it like this.

$.get('/admin/credentials').success(function(data) {
  var bucket, params, req;
  AWS.config.region = 'us-west-2';
  if (data.success) {
    AWS.config.update(data.credentials);
    AWS.config.region = 'us-west-1';
    bucket = new AWS.S3({
      params: {
        Bucket: "example-incoming"
      }
    });
    params = {
      Key: file.name,
      ContentType: file.type,
      Body: file
    };
    req = bucket.putObject(params);
    return req.send(function(err, data) {
      return $scope.loading = (err ? "ERROR!" : "UPLOADED.");
    });
  }
});

When doing the request, I get the following error

OPTIONS https://example.s3-us-west-1.amazonaws.com/sintel_trailer-480p.mp4 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

(with example.com obviously being a made-up site, and sintel being a free movie I use for testing)
I'm not sure what I'm doing wrong...Could someone elucidate on what I'm doing wrong?

[Tombert]

Also, upon looking at the debugger in chrome, the admin credentials is indeed returning the proper credentials, and the data object looks like this

{accessKeyId: 'akid', secretAccessKey: 'secret'}

[lsegal]

The OPTIONS error you are getting is due to CORS not being configured on your S3 bucket. S3 requires CORS to be manually configured for requests to access objects in a bucket. You can see this described in the Getting Started Guide of the AWS SDK for JavaScript. Hope that helps.

[Tombert]

I believe CORS actually is configured.

if I go to the bucket list, click properties, then click "Edit CORS configuration" under Permission, I have the following.

<?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>
    </CORSRule>
</CORSConfiguration>

Is there another place to edit CORs that I missed?

[Tombert]

Is there any update on this? Can someone please explain what I'm doing wrong?

[lsegal]

This is not going to be an SDK issue since the SDK has no impact on the OPTIONS request that is sent by the browser's security layer. The configuration you listed looks correct, but you might want to verify that you are operating on the correct bucket with that configuration. Without more information about this failure it is difficult to know exactly what is going wrong.

[lsegal]

Closing this old issue. If you run into similar issues please feel to open a new issue with all the necessary information to reproduce the problem, but make sure to verify that the OPTIONS request sent by your browser is returning successfully to ensure that CORS is correctly configured. You can check this by looking at your browser network inspector tab -- it should list the OPTIONS request with either success or error.

[mrcoles]

This is probably completely irrelevant now, but did you try adding <AllowedMethod>OPTIONS</AllowedMethod>?

[Tombert]

Sadly the company I was working for on this site went bankrupt about a year ago, so I don't have an opportunity to try this.

[marcosnils]

This is probably completely irrelevant now, but did you try adding OPTIONS?

S3 doesn't allow you to confgure OPTIONS as a value for the AllowedMethod tag. Any hints on this?

[evandrix]

This is probably completely irrelevant now, but did you try adding OPTIONS?

S3 doesn't allow you to confgure OPTIONS as a value for the AllowedMethod tag. Any hints on this?

Found unsupported HTTP method in CORS config. Unsupported method is OPTIONS

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.