Błąd przy użyciu pakietu Meteor's Slingshot z Google Cloud z localhost

Question

Próbuję skonfigurować małą sekcję przesyłania na mojej stronie internetowej, aby użytkownik mógł przesłać obraz profilu. Używam proca z Google Cloud i testowania tego z localhost, ale otrzymuję te błędy:

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

I rysunek ten błąd jest z powodu mojej konfiguracji Cors, więc próbowałem najróżniejszych konfiguracje i nic nie działa.

To moja najnowsza konfiguracja CORS:

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

próbowałem go tak dobrze jak:

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

Nadal nic. Ten sam błąd, co poprzednio.

To jest mój kod serwera dla 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; 
    } 

}); 
} 

Oto klient strona Prześlij inicjacja:

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); 
    } 

Wszystkie zmienne sprawdzić. Mój plik PEM sprawdza się i działa dobrze. Tak więc wystąpił błąd związany albo z Google Cloud, albo ze sposobem, w jaki ustawiłem mój plik CORS.

Każda pomoc zostanie doceniona.

Answer 1

Miałem ten sam problem, ale debugowanie było dużo gorsze. W mojej aplikacji na Androida przesyłanie działało dobrze, ale w systemie iOS wystąpił ten sam błąd.

TLDR: Nie używaj kropek w nazwie wiadra (dla aliasu CNAME). Mój działał po zmianie nazwy z gs://static.myapp.com na gs://myapp-static. Jeśli potrzebujesz niestandardowej domeny, użyj ręcznego modułu równoważenia obciążenia.

Full Story

Moje wiadro nazwano static.myapp.com więc mogę utworzyć rekord CNAME w moim dostawcą DNS i służyć moje obrazy używając domenę niestandardową.

Okazuje się, że sama jest przesyłanie za pośrednictwem url https://<bucket-name>.storage.googleapis.com z certyfikatu SSL dla zamiennika *.storage.googleapis.com, więc byłem zmuszony zmienić nazwę wiadro myapp-static tak URL dopasowane certyfikat.

To rozbija podejście CNAME, ale nadal można skonfigurować ręczny moduł równoważenia obciążenia, aby ukryć adres URL Google Cloud i korzystać z niestandardowej poddomeny. Poniżej zrzut ekranu dla mojej obecnej konfiguracji modułu Load Balancer.