Google Cloud Storage - Direct upload with XMLHttpRequest causes "Access-Control-Allow-Origin"-error

Question

my following question makes use of: Java, GWT, jQuery, App Engine (GAE).

There's a lot of questions regarding the "Access-Control-Allow-Origin"-header but nothing seems to be what I'm after.

I'm trying to upload a file to Google Cloud Storage using POST Object. This works fine if I'm simply using a html-form to actually make the upload. But as soon as I'm trying to use the XMLHttpRequest to make the exact same request, I get the error "No 'Access-Control-Allow-Origin' header is present on the requested resource". I have followed the setup CORS for a bucket-guide. My CORS xml-file looks as follows:

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>*</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>POST</Method>
      <Method>HEAD</Method>
      <Method>DELETE</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>x-goog-meta-foo1</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>1800</MaxAgeSec>
  </Cors>
</CorsConfig>

So why am I using the XMLHttpRequest? It's because I want to be able to have upload-progression on my file uploads to the Google Cloud Storage (GCS). I'm not sure if I'm making some mistake somewhere or if it's even possible to have upload-progress when uploading to the GCS. But as far as I understand there should be no limitation on this, since the upload-progression isn't based on communication with the GCS (other then upload speed).

I've forcefully cleaned my cache, but that didn't help! :(

Any suggestions?

Thank you!

Whyser Whyser · Accepted Answer · 2014-01-15T13:37:54

I really don't like answering my own questions because it seems like I didn't do enough research before I ask. But I really did, I did try everything I could for 1.5 days before I asked this question.

The problem was one line in the CORS xml-file:

<ResponseHeader>x-goog-meta-foo1</ResponseHeader>

Should be replaced by:

<ResponseHeader>*</ResponseHeader>

I really didn't think this would make any difference because I assumed the 'Access-Control-Allow-Origin'-header would be sent as default, since that's why I'm making this setup and the docs doesn't mention anything about it. I did kinda understand that the x-goog-meta-foo1 was an example, but not that it would break the settings if used (Google, please update the docs).

Google Cloud Storage - Direct upload with XMLHttpRequest causes "Access-Control-Allow-Origin"-error

1 Answers