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.

Answer 1

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.