使用带有进度监听器的XMLHttpRequest的GCS签名URL Post对象导致浏览器发送选项而不是POST

时间:2017-03-27 06:18:03

标签: google-cloud-storage

我已使用XMLHttpRequest和angular $http从浏览器使用签名,策略文档GCS POST ...等多部分Post请求成功实现了对象的上传。

但是当我在XMLHttpRequest上传上附加事件监听器以向用户显示进度条时,浏览器会发送选项方法而不是POST。 storage.googleapis.com返回200 ok之后我希望从浏览器发送一个POST文件,但是没有发生。没有上传监听器,代码就能完美运行。我应该搬到PUT吗?任何解决方法



   factory.uploadFileToUrlXHR = function(file,obj){
         var deferred = $q.defer();
         var fd = new FormData();
         fd.append('key', obj.key);
         fd.append('Content-Type',obj.contenttype)
         fd.append('GoogleAccessId', obj.googleaccessId);
         fd.append('policy', obj.policy);
         fd.append('signature', obj.signature);
         fd.append('file', file);
         var XHR = new XMLHttpRequest();
         XHR.addEventListener('load', function(event) {
           //  alert('Yeah! Data sent and response loaded.');
             deferred.resolve(event);
         });

       XHR.upload.addEventListener("progress",function(evt){
              if (evt.lengthComputable) {
                 $log.info("add upload event-listener" + evt.loaded + "/" + evt.total);
               }
            }, false);

  // Define what happens in case of error
        XHR.addEventListener('error', function(event) {
          //alert('Oups! Something went wrong.');
          deferred.resolve(event);
         });

  // Set up our request
        XHR.open('POST', obj.uri);

  // Send our FormData object; HTTP headers are set automatically
        XHR.send(fd);
         return deferred.promise;
    }




1 个答案:

答案 0 :(得分:0)

我解决了这个问题,

当您使用浏览器中的POST将文件上传到Google Cloud存储时,会将存储桶名称附加到URL。在下面的代码中,obj.uri应该是" https://storage.googleapis.com/bucketname

XHR.open(' POST',obj.uri);并从密钥中删除存储桶名称。密钥应包含对象名称。

fd.append(' key',obj.key);

如果您没有将存储桶名称作为POST URL的一部分附加,则浏览器会将选项请求发送到https://storage.googleapis.com/。 GCS将无法找到正确的CORS配置。 CORS配置映射到存储桶名称。

我申请的CORS配置示例。

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