CORS, get over it!

Posted July 25th, 2012 with No Comments

We’ve been growing up with the dogma: “AJAX cannot make cross site calls”.
Then CORS happened: with some configuration on HTTP server headers it’s possibile to make cross site AJAX calls, it’s widely adopted by modern browsers but it was not love at first sight: I’m not particulary happy with people calling my APIs from a different domain and when I have to, JSONP is just fine.

Eventually came the day when I cannot pretend CORS doesn’t exist.
I’m using Heroku for my projects and I usually keep all my static resources on Amazon S3 or Google Cloud Storage. During the last deploy I noticed that Firefox stopped loading a font with CSS @font-face rule on productions servers. It took me hours to realize that was a security restriction: Firefox will not load any font file from a different domain unless CORS is enabled.

Unfortunately Amazon S3 doesn’t support CORS (and it won’t support any sooner, there’s a two years old thread about this topic in the support forum, still unresolved), Google Cloud Storage does and it’s quite easy:

Install the tool gsutils and create this file cors.xml:

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

And then cast the command

gsutil setcors cors.xml gs://my_bucket

It will enable CORS for the whole bucket (be sure to match exactly the domain in the Origin tag, with protocol and host port).

Update: Amazon S3 started supporting CORS!

  • Categories

  • Tags

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2 other subscribers

  • Follow me on Twitter