Skip to content
This repository

Amazon S3 CORS Support: do we still need the proxy script? #152

Closed
pilap82 opened this Issue September 01, 2012 · 12 comments

6 participants

Pierre Laprée Jeff Lembeck simboy kcharvey Micky Hulse Tom Fuertes
Pierre Laprée

Hi,
does the recent announcement of Amazon of CORS (Cross Origin Resource Sharing) support for S3 will allow us to no longer use the proxy script? (if respond.min.js is hosted on S3)

Thanks for your insight.

p.

Announcement: http://aws.amazon.com/about-aws/whats-new/2012/08/31/amazon-s3-announces-cross-origin-resource-sharing-CORS-support/

simboy

That's correct. No more messy proxy to deal with. You have to set up your bucket for CORS, then it's just a matter of sending POST requests from the client side.

kcharvey

I've been fighting with respond.js on S3 (and CloudFront) for the last two days and haven't been able to get it to work (though it works in my dev setup). Does this mean that all I need is the following?:

<link rel="stylesheet" href="https://dxxxxxxxxxx.cloudfront.net/CACHE/css/compressed.css" type="text/css" media="screen">
<script type="text/javascript" src="https://dxxxxxxxxxx.cloudfront.net/j/r/respond.min.js"></script>

What do you mean by 'sending POST requests from the client side'? Thanks in advance.

Micky Hulse

@kcharvey Have you setup your CORS file on your bucket? I don't use CloudFront, but I do use a CNAMEd S3 bucket to host web fonts, and it works pretty good... All I had to do was setup my CORS file on my bucket using the S3 management console. Not sure if it will help, but here's my CORS configuration.

If you do get it working, it'd be cool if you posted your CORS config back to this thread.

I'm going to be testing this with my S3 bucket and I'll post back my results in the next few days.

Cheers,
M

kcharvey

@mhulse Here's my CORS config:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

I DID finally get this to work, but I had to use respond.proxy.js with a small hack, documented on StackOverflow: http://stackoverflow.com/questions/12715903/django-cloudfront-and-respond-js

Micky Hulse

@kcharvey Thanks for posting your CORS and the fix to your problem!

I'm testing my setup now... I'm hoping I don't have to use the proxy file with an S3 bucket.

My project files will be setup like so (abbreviated):

mys3project.tldomain.com/
    css/
        foo.css
        other.css
    js/
        foo.js
        plugins/
             respond.js
             other.js

In other words, my goal is to host all of my site's assets via an S3 CNAMEd bucket (not using cloudfront).

I'll have 3 or 4 other domains calling the above assets...

I have yet to figure out if this setup will even need a CORS setup because respond.js will be on the same S3 bucket as all of my asset files.

Update: Appears that respond.js ain't working so well in IE8 with the above setup. I really want to avoid the overhead of a proxy script.

Anyway, I'm testing now and will report back here with my results... Maybe it will help others that have a similar setup.

Micky Hulse

Anyone have any tips on how to debug IE8? I wish this script had some sort of console output... Is there a debug mode? I'm currently using Debug Bar and Fiddler (and IE dev toolbar), but nothing is showing me an XHR/ajax request... I assume because it's silently failing... If so, how can I capture that failure?

Here's my latest CORS configuration:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://*.foo.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>2592000</MaxAgeSeconds>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Date</ExposeHeader>
        <ExposeHeader>ETag</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
        <ExposeHeader>Connection</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

I imagine I'll have to setup the proxy script.

kcharvey

@mhulse, you'll definitely need to host respond.js from your local machine. And if you need the proxy stuff, everything except respond.proxy.html needs to be on your local machine as well. Check out the example.html in the proxy directory of the source code.

Micky Hulse

@kcharvey Thanks so much for your reply and guidance, I really appreciate it. :)

I'll test some more tonight and post back my findings. Thanks for the help!

So, going back to the original posters (@pilap82) question... Does Amazon's new CORS configuration capabilities make using this script any easier if you're doing the "CDN/X-Domain Setup"? It appears the answer is, no... No? :D

In other words, couldn't I setup this proxy stuff without a CORS configuration?

Micky Hulse

So, just in case it helps anyone else to see another example, here's how I got it working using S3 bucket.

First, my bucket setup:

  • s3subdomain.domain.com/
    • test/
      • demo.css
      • respond-proxy.html

Contents of demo.css:

body { background: yellow; }

@media only screen and (min-width: 990px) {

    body { background: orange; }

}

On other server (fictional):

  • domain.com/
    • index.html
    • respond.proxy.js
    • respond.proxy.gif
    • respond.src.js

Contents of index.html:

<!doctype html>
<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>respond.js test</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <meta name="viewport" content="width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="http://s3subdomain.domain.com/test/demo.css">

    <!--[if (lt IE 9) & (!IEMobile)]>
        <script src="respond.src.js"></script>
        <link id="respond-proxy" rel="respond-proxy" href="http://s3subdomain.domain.com/test/respond-proxy.html">
        <link id="respond-redirect" rel="respond-redirect" href="respond.proxy.gif">
        <script src="respond.proxy.js"></script>
    <![endif]-->

</head>
<body>
    <h1>Demo</h1>
</body>
</html>

Note: I put all of the respond.js scripts in the IE conditional comment.


I have yet to try the above without the Amazon CORS configuration... I suspect that having CORS makes no difference?

Anyway, I thought that juggling all of these extra files was going to be a pain, but it ended up being pretty straight forward to setup... I feel better now. :D

Thanks for your help @kcharvey, I really appreciate it!!!

M

Jeff Lembeck jlembeck closed this November 20, 2013
Jeff Lembeck
Collaborator

Looks like the Amazon CORS configs above help solve the problem. Thanks

Tom Fuertes

Did a lot of digging on this today. Looks like the proxy script is the only way to go as CORS isn't supported on IE7 and limitedly supported on IE8 via the XDomainRequest AJAX Object (which respond.js doesn't use out of the box). So you might be able to go the CORs route, but it would require a custom fork and only get you out of the proxy on IE8. <3

Micky Hulse

@tomfuertes interesting findings. Thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.