谷歌云在导航器中使用签名 url 进行故障排除并做出反应

Question

我正在尝试在带有 url 签名的谷歌云存储桶上上传文件。 我生成这个 url 在 java 服务器端 api 上签名（lagom 和 scala，但使用谷歌的 java 库），如下所示：

    def generateV4GPutObjectSignedUrl(objectId: String, bucketTempName : String): String = {
    // Define Resource
    val blobInfo = BlobInfo.newBuilder(BlobId.of(bucketTempName, objectId)).build
    // Generate Signed URL
    val extensionHeaders : HashMap[String, String] = new HashMap();
    extensionHeaders.put("content-type", "application/x-www-form-urlencoded");

    val url = storage.signUrl(blobInfo, timeSignedUrl, TimeUnit.SECONDS, Storage.SignUrlOption.httpMethod(HttpMethod.PUT),
        Storage.SignUrlOption.withExtHeaders(extensionHeaders), Storage.SignUrlOption.withV4Signature())

    url.toString
  }

在我的客户端 reactjs 上，我尝试将此 url 与 Axios 一起使用： ''' const file = this.state.file; const url = 新 URL(this.state.urlToUpload);

    const options = {
        params : url.search,
        headers : {
            "Content-Type" : file.type,
            /*"X-File-Name" : this.state.tenantId + "-" + this.state.id,*/
            /*"Content-Length" : file.size,*/
            //"access-control-allow-origin" : "*"
        },
        
    }
    console.log(options);
    let callback = function (response) {
        console.log(response);
        // handle success
        this.setState({
            isUpload : true
        });// upload sur google qd l'état modifier
        console.log("upload finished");
    };
    callback =  callback.bind(this);


    console.log("upload begin");
    axios.put(url.href, file, options).then(callback)
    .catch(function (error) {
      // handle error
      console.log(error);
    })
    .then(function () {
      // always executed
    });

''' 我已经像这样设置了我的存储桶 CORS：

[
    {
      "origin": ["http://localhost:3000"],
      "responseHeader": ["Content-Type", "X-File-Name", "Content-Length", "access-control-allow-origin", "Authorization", "User-Agent", "x-goog-resumable", "Accept-Encoding", "Accept-Language", "Connection", "Host", "Origin", "Referer", "TE", "Accept"],
      "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
      "maxAgeSeconds": 1800
    }
]

我测试了不同的内容类型（总是相同的客户端和服务器端）。 对于所有这些测试，Option preflight http 请求是这样的：

HTTP/2 200 OK
x-guploader-uploadid: AAANsUkl4OZVmEX_cBGT2Wd363YoJd6mcG_59hY7TgPH4lupm38VXEHXRYkYVt6nzOb7synkbkRExV45KlJfqBzMiNZwYTQt0w
access-control-allow-origin: http://localhost:3000
access-control-max-age: 1800
access-control-allow-methods: GET,POST,PUT,DELETE,OPTIONS
access-control-allow-headers: Content-Type,X-File-Name,Content-Length,access-control-allow-origin,Authorization,User-Agent,x-goog-resumable,Accept-Encoding,Accept-Language,Connection,Host,Origin,Referer,TE,Accept
vary: Origin
date: Wed, 08 Jul 2020 13:03:52 GMT
expires: Wed, 08 Jul 2020 13:03:52 GMT
cache-control: private, max-age=0
content-length: 0
server: UploadServer
content-type: text/html; charset=UTF-8
alt-svc: h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-25=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
X-Firefox-Spdy: h2

但放置请求失败，出现 403 错误代码和 CORS 缺少允许来源：

HTTP/2 403 Forbidden
x-guploader-uploadid: AAANsUmuMK8iiw99CGz7ldrcHZR_GkBttiMEBo_tBeR5-GpchMWT8InuNVGa2TfAdiCsDGuQUXF93PH1F98K7PG-rQDYQcLtUQ
content-type: application/xml; charset=UTF-8
content-length: 1697
date: Wed, 08 Jul 2020 13:04:02 GMT
server: UploadServer
alt-svc: h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-25=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
X-Firefox-Spdy: h2

我在 Postman 上用相同的 header 尝试了相同的请求，我没有任何错误，文件上传正确。 我尝试禁用导航器上带有扩展名的 CORS，它消除了 CORS 错误，但错误 403 仍然存在。 我认为谷歌不会在 header 中添加“access-control-allow-origin”。

Answer 1

使用 XMLHttpRequest 和 FormData，它解决了问题。

handleIdAndUrlReceived() {
        const file = this.state.file;
        const url = new URL(this.state.urlToUpload);
        var xhr = new XMLHttpRequest();
        const formData = new FormData();

        for(let e in url.search){
            formData.append(e, url.search[e]);
        }

        formData.append("file", file);

        xhr.open("PUT", url.href);
        xhr.setRequestHeader('Content-Type', file.type);
        xhr.send();
    }