签名 url 中格式错误的安全性 Header 错误 - Header 包含在签名标头中，但不包含在请求中

Question

我正在尝试使用 Signed URLs 通过 Google 应用引擎使用 React 和节点上传文件。我能够生成带符号的 URLs，但是在控制台中出现 CORS 错误时。当我在浏览器中打开已签名的 URL 时，在 return.

中出现以下错误

<Error>
<Code>MalformedSecurityHeader</Code>
<Message>Your request has a malformed header.</Message>
<ParameterName>content-type</ParameterName>
<Details>Header was included in signedheaders, but not in the request.</Details>
</Error>

这是我生成 Signed Url

的节点 js 代码

async function generateV4UploadSignedUrl() {
          const options = {
            version: "v4",
            action: "write",
            expires: Date.now() + 15 * 60 * 1000, // 15 minutes
            contentType: "audio/wav",
          };

          // Get a v4 signed URL for uploading file
          const [url] = await gcTempFiles
            .file(gcFileName)
            .getSignedUrl(options);

          console.log("Generated PUT signed URL:");
          console.log(url);
          console.log("You can use this URL with any user agent, for example:");
          console.log(
            "curl -X PUT -H 'Content-Type: application/octet-stream' " +
              `--upload-file my-file '${url}'`
          );

          res.status(200).json({
            success: true,
            msg: `url created`,
            data: { url},
          });
        }

这是我在 React 应用程序中的前端代码


let file = files.map((f) => f.file);

console.log(file)

let xhr = new XMLHttpRequest();
        xhr.open('PUT', signedurl, true);
        xhr.setRequestHeader("Content-type", "application/octet-stream");
        xhr.onload = function (response) {
          console.log('on-load', response);
        };

        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
        
            if (xhr.status === 200) {
              console.log("Status OK")
        
            } else {
              console.log("Status not 200")
            }
          }
        };

        xhr.onerror = function (response) {
          console.log("Response error", response)
        };

        xhr.upload.onprogress = function (evt) {
          // For uploads
          if (evt.lengthComputable) {
            var percentComplete = parseInt((evt.loaded / evt.total) * 100);
            console.log("progress", percentComplete)
        
          }
        }
        xhr.send(file);

此外，我已经使用以下命令在存储桶级别设置了所有 CORS 策略 gsutil cors set cors.json gs://bucket name

cors.json 文件

[{"origin": ["*"],
"responseHeader": ["X-Requested-With", "Access-Control-Allow-Origin", "Content-Type"],
"method": ["GET", "HEAD", "POST"],
"maxAgeSeconds": 3600}]

我再次在 google 应用引擎上构建 Web 应用程序。并且需要签名 URLs 才能解决 32MB 限制。有人可以指出我做错了什么吗？因此，非常感谢任何有用的建议。

Answer 1

我已通过使用以下代码在存储桶上配置 CORS 解决了该错误。效果很好。

async function configureBucketCors() {
    await storage.bucket(bucketName).setCorsConfiguration([
      {
        maxAgeSeconds: 3600,
        method: ["PUT", "GET", "HEAD", "DELETE", "POST", "OPTIONS"],
        origin: ["*"],
        responseHeader: [
          "Content-Type",
          "Access-Control-Allow-Origin",
          "x-goog-resumable",
        ],
      },
    ]);
  }
  configureBucketCors().catch(console.error);

签名 url 中格式错误的安全性 Header 错误 - Header 包含在签名标头中，但不包含在请求中

MalformedSecurityHeader error in signed url - Header was included in signedheaders, but not in the request

file-upload

node.js

google-cloud-storage

reactjs