Error using Meteor's Slingshot package with Google Cloud from localhost

Question

I'm trying to set up a little upload section on my website for user to upload a profile image. I'm using Slingshot with Google Cloud and testing this from localhost, but I get these errors:

OPTIONS https://mybucket.storage.googleapis.com/ net::ERR_INSECURE_RESPONSE

I figure this error is because of my CORS configuration, so I tried all kinds of different setups and nothing works.

This is my most recent CORS setup:

[
    {
      "origin": ["http://localhost:3000/"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

I tried it like this as well:

[
    {
      "origin": ["*"],
      "responseHeader": ["*"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

Still, nothing. Same error as before.

This is my server code for Slingshot:

if(Meteor.isServer){

// Initiate file upload restrictions
  Slingshot.fileRestrictions("userLogoUpload", {
  //Only images are allowed
  allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
  //Maximum file size:
  maxSize: 2 * 1024 * 1024 // 2 MB (null for unlimited)
});

  // Google Cloud Directives
  Slingshot.createDirective("userLogoUpload", Slingshot.GoogleCloud, {
    bucket: Meteor.settings.public.GoogleCloudBucket,
    GoogleAccessId: Meteor.settings.private.GoogleAccessId,
    GoogleSecretKey: Assets.getText("xxxxxxxxxx.pem"),
    // Uploaded files are publicly readable
    acl: "public-read",
    authorize: function(){
      if(!Meteor.userId()){
        throw new Meteor.error("Login Required", "Please log in to upload files");
      }
      return true;
    },
    key: function(file){
      let user = Meteor.users.findOne(Meteor.userId());
      return user.profile.username + "/" + file.name;
    }

});
}

Here's the client side upload initiation:

let uploader = new Slingshot.Upload("userLogoUpload");
uploader.send(document.getElementById("upload").files[0], function(error, downloadUrl){
  if(!error){
    console.log(downloadUrl);
  } else{
    console.error('Error uploading', uploader.xhr.response);
    console.log(error);
  }

All the variables check out. My pem file checks out and works fine. So there has to be an error with either Google Cloud or the way I set up my CORS file.

Any help would be appreciated.

Did you try adding POST to the methods? e.g. `"method": ["GET", "HEAD", "DELETE", "POST"]` — carlevans719, Aug 18 '16 at 09:21
@carlevans719 Yes, I added POST method. That was the logical first thing I did, but nothing connected. — Mabeh Al-Zuq Yadeek, Aug 18 '16 at 13:39
Would like to see the response error in full, not the exception, but a couple things come to mind: — Mussser, Aug 18 '16 at 15:38
Make sure GoogleAccessId and GoogleSecretKey are properly populated — Mussser, Aug 18 '16 at 15:38
And, in your CORS, try this: "method": ["GET", "POST", "PUT", "HEAD"] — Mussser, Aug 18 '16 at 15:39
@Mussser This is the full error displayed for the `ERR_INSECURE_RESPONSE` portion: https://i.gyazo.com/c781bf5d2069fa84303aa1d9dc41313b.png — Mabeh Al-Zuq Yadeek, Aug 18 '16 at 17:08
The GoogleAccessId loads fine and so does the secret key (from what I can tell via console logging the statements before they fire off).There is definitely something off with my CORS file or maybe something else I'm unaware of? Not sure what other checks to perform on the Secret Key and Access Id other than logging in the console. — Mabeh Al-Zuq Yadeek, Aug 18 '16 at 17:15
Did you change your CORS methods like this? "method": ["GET", "POST", "PUT", "HEAD"] — Mussser, Aug 18 '16 at 20:02
Yeah, I've tried it like that but nothing works and I have the same error as before. — Mabeh Al-Zuq Yadeek, Aug 18 '16 at 20:56
I switched over to Amazon S3 and it worked on the first try with 0 errors. I think there may be a problem with Google Cloud and there is 0 chance I can contact their support or get a live person to talk to me. I guess I'll stay with Amazon. — Mabeh Al-Zuq Yadeek, Aug 19 '16 at 16:24

score 2 · Answer 1 · answered Mar 26 '17 at 04:35

I had the same problem here, but the debug was a lot worse. In my Android application the upload worked fine, but in iOS I got the same error.

TLDR: Don't use dots in your bucket name (for a CNAME alias). Mine worked when renamed from gs://static.myapp.com to gs://myapp-static. If custom domain needed, use a manual Load Balancer.

Full Story

My bucket was named static.myapp.com so I could create a CNAME record in my DNS provider and serve my images using a custom domain.

Turns out the upload itself is through the url https://<bucket-name>.storage.googleapis.com with a SSL certificate for the wildcard *.storage.googleapis.com, so I was forced to rename the bucket to myapp-static so the URL matched the certificate.

This breaks the CNAME approach, but you can still setup a manual Load Balancer to hide the Google Cloud URL and use a custom subdomain. Below there is a screenshot for my current Load Balancer configuration.

Thanks alot! really helped, was stuck with this for a day! – Firdous Nov 06 '20 at 10:40 — Firdous, Nov 06 '20 at 10:40

Error using Meteor's Slingshot package with Google Cloud from localhost

1 Answers1