Meteor and Amazon S3 'Access-Control-Allow-Origin' error

help
1

Hi everyone,

I’m working on a web app on my localhost:3000 with Meteor/React and Amazon S3. I’m trying to upload on image on my S3 bucket. It’s basically a side project where I would like to learn more about Meteor and how to use S3.

On my Amazon bucket I’ve defined a CORS configuration:

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

Now I want to upload an image and I get this error:

XMLHttpRequest cannot load https://my_bucket.s3-eu-west-1.amazonaws.com/. 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:3000' is therefore not allowed access.

On my meteor project side to upload I’m using Slingshot:

import { Slingshot } from 'meteor/edgee:slingshot';
import { Meteor } from 'meteor/meteor';

Slingshot.fileRestrictions("Uploads", {
  allowedFileTypes: null,
  maxSize: null // 2 MB (use null for unlimited)
});
Slingshot.createDirective("Uploads", Slingshot.S3Storage, {
  bucket: Meteor.settings.private.BUCKET_S3,
  acl: "public-read",
  region: Meteor.settings.private.REGION_S3,
  AWSAccessKeyId: Meteor.settings.private.AWS_ID,
  AWSSecretAccessKey: Meteor.settings.private.AWS_SECRET,
  authorize: function () {
    return true;
  },
  key: function ( file ) {
    let fileName = Date.now();
    return `test/${fileName}`;
  }
});

I read a lot about this error but I couldn’t find a solution to fix my issue. I’m pretty sure it’s a setting on my Amazon s3 bucket but I can’t see where. I think this CORS configuration above is correct.

What I tried to do so far:

  • I’ve tried to allow such headers within my meteor project I can see in the terminal it goes through the function but it doesn’t help.

  • Also I thought it could be because CORS is not compatible with localhost so I’ve tried to deploy my app on heroku but there is still this issue.

Any help, would be much appreciated.
Thanks.

2

Just a hunch, but I hit this error when my region wasn’t properly set.

3

It was an excellent hunch actually… ! Thank you

1 Like