javascript - Create signed URLs for Google Cloud Storage with node.js for direct upload from browser - Stack Overflow

admin管理员组

文章数量:1323330

actual testcase code:

I'm trying to add ability for my API to return signed URLs for direct upload to Google Cloud Storage from the client.

Serverside, I'm using the gcloud SDK for this:

const gcloud = require('gcloud')

const gcs = gcloud.storage({
  projectId: 'my project',
  keyFilename: __dirname + '/path/to/JSON/file.json'
})
const bucket = gcs.bucket('bucket-name')

bucket.file('IMG_2540.png').getSignedUrl({
 action: 'write',
 expires: Date.now() + 60000
}, (error, signedUrl) => {
  if (error == null) {
    console.log(signedUrl)
  }
})

Then in the browser I've got an <input type='file'/> that I've selected a file with, then I attempt to post it to the URL generated from my server-side script like this:

function upload(blobOrFile, url) {
  var xhr = new XMLHttpRequest();
  xhr.open('PUT', url, true);
  xhr.onload = function(e) {
    console.log('DONE!')
  };
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      console.log((e.loaded / e.total) * 100)
    }
  };

  xhr.send(blobOrFile);
}

// grab the `File` object dropped (which incidentally
// matches the file name used when generating the signed URL 
upload($('[name=file]').files[0], 'URL GENERATED FROM SERVER-SIDE SCRIPT HERE');

What happens?

Response is:

<Error>
  <Code>SignatureDoesNotMatch</Code>
  <Message>The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method.</Message>
<StringToSign>PUT

image/png
1476631908
/bucket-name/IMG_2540.png</StringToSign>
</Error>

I've re-downloaded the JSON key file to make sure it's current and has proper permissions to that bucket and I don't get any errors or anything when generating the signed URL.

The clientside code appears to properly initiate an upload (I see progress updates logged out) then I get the 403 error above. Filenames match, content-types seem to match expected values, expiration seems reasonable.

The official SDK generated the URL, so it seems like it'd be ok.

I'm stuck, any help appreciated.

actual testcase code: https://github./HenrikJoreteg/google-cloud-signedurl-test-case

I'm trying to add ability for my API to return signed URLs for direct upload to Google Cloud Storage from the client.

Serverside, I'm using the gcloud SDK for this:

const gcloud = require('gcloud')

const gcs = gcloud.storage({
  projectId: 'my project',
  keyFilename: __dirname + '/path/to/JSON/file.json'
})
const bucket = gcs.bucket('bucket-name')

bucket.file('IMG_2540.png').getSignedUrl({
 action: 'write',
 expires: Date.now() + 60000
}, (error, signedUrl) => {
  if (error == null) {
    console.log(signedUrl)
  }
})

Then in the browser I've got an <input type='file'/> that I've selected a file with, then I attempt to post it to the URL generated from my server-side script like this:

function upload(blobOrFile, url) {
  var xhr = new XMLHttpRequest();
  xhr.open('PUT', url, true);
  xhr.onload = function(e) {
    console.log('DONE!')
  };
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      console.log((e.loaded / e.total) * 100)
    }
  };

  xhr.send(blobOrFile);
}

// grab the `File` object dropped (which incidentally
// matches the file name used when generating the signed URL 
upload($('[name=file]').files[0], 'URL GENERATED FROM SERVER-SIDE SCRIPT HERE');

What happens?

Response is:

<Error>
  <Code>SignatureDoesNotMatch</Code>
  <Message>The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method.</Message>
<StringToSign>PUT

image/png
1476631908
/bucket-name/IMG_2540.png</StringToSign>
</Error>

I've re-downloaded the JSON key file to make sure it's current and has proper permissions to that bucket and I don't get any errors or anything when generating the signed URL.

The clientside code appears to properly initiate an upload (I see progress updates logged out) then I get the 403 error above. Filenames match, content-types seem to match expected values, expiration seems reasonable.

The official SDK generated the URL, so it seems like it'd be ok.

I'm stuck, any help appreciated.

• javascript
• node.js
• google-cloud-storage

Share Follow edited Oct 17, 2016 at 4:05 Henrik Joreteg asked Oct 16, 2016 at 16:07 Henrik JoretegHenrik Joreteg 1,7361616 silver badges1919 bronze badges 3

• I know you say content-types seem to match expected. Still, to confirm, when you look at headers sent from browser it is only content-type: image/png ? XHR does this for you, without you needing to setRequestHeader()? – glenschler Commented Oct 16, 2016 at 23:36
• Thanks @glenschler, but yeah, XHR does this as of version 2, I believe. Here's the headers: cloudup./cWxNOTCs_EZ – Henrik Joreteg Commented Oct 17, 2016 at 1:27
• updated to include repo with isolated case: github./HenrikJoreteg/google-cloud-signedurl-test-case – Henrik Joreteg Commented Oct 17, 2016 at 4:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

As was pointed out by Philip Roberts, aka @LatentFlip on my github repo containing this case, adding a content-type to the signature took care of it.

https://github./HenrikJoreteg/google-cloud-signedurl-test-case/pull/1/mits/84290918e7b82dd8c1f22ffcd2c7cdc06b08d334

Also, it sounds like the Google folks are going to update docs/error to be a bit more helpful: https://github./GoogleCloudPlatform/google-cloud-node/issues/1695

本文标签：