InvalidPolicyDocument, Missing policy error google cloud storage

Question

I am trying to access a google cloud storage bucket with axios to upload a file:

I set the CORS policy in the bucket to:

[
    {
      "origin": ["http://localhost:8000", "localhost"],
      "responseHeader": ["Access-Control-Allow-Origin", "Content-Type"],
      "method": ["GET", "HEAD", "DELETE", "PUT", "POST"],
      "maxAgeSeconds": 3600
    }
]

Then I generate a signed url using this gsutil command:

gsutil signurl -m RESUMABLE -d 1h my-key.json gs://test-bucket/

Then finally I send this axios POST request:

var startLink = "signed url from gsutil"
var data = {
  'Content-Length': 0,
  'Content-Type': 'text/plain',
  'x-goog-resumable': 'start',
  host: 'test-django-bucket.storage.googleapis.com',
};

axios.post(startLink, data)
  .then(function(response) {
    console.log(respone);
  });

This result I get is:

<?xml version='1.0'
encoding='UTF-8'?><Error><Code>InvalidPolicyDocument</Code><Message>The content of the form does not meet the conditions specified in the
policy document.</Message><Details>Missing policy</Details></Error>

What exactly have I done wrong here? I'm following the instructions found here.

---

Update: A couple notes on what I had to fix to get everything working after some times from @BrandonYarbrough below:

First the axios request was wrong, it should be:

var data = {
  headers: {
    'content-type': 'text/plain',
    'x-goog-resumable': 'start',
  }
};
axios.post(startLink, {}, data)
  .then(function(response) {
    console.log(response);
  });

Next I had to update the gstuil command as described below to:

gsutil signurl -m RESUMABLE -d 10h -c "text/plain" mykey.json gs://test-bucket

Answer 1

You need to give gsutil two other pieces of information to add to the signature: the Content-Type, and the name of the object you're creating. Try this command:

gsutil signurl -m RESUMABLE -d 1h -c "text/plain" my-key.json gs://test-bucket/object-name.txt

Also, gsutil will probably output a URL like "storage.googleapis.com/test-django-bucket/your_object?lotsOfUrlParameters". If you were to go to that URL while specifying a host header of "test-django-bucket.storage.googleapis.com", it would appear that you actually wanted an object called "test-django-bucket/your_object" inside of a bucket called "test-django-bucket". Either remove the host header and hit storage.googleapis.com directly, or edit the URL returned by gsutil to remove the "test-django-bucket" bit.

In addition, you're sending headers as data, I think. I think axios headers are set using the "headers" config section.