Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

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

Closed
pilap82 opened this Issue Sep 1, 2012 · 13 comments

Comments

Projects
None yet
7 participants

pilap82 commented Sep 1, 2012

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 commented Sep 26, 2012

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.

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.

mhulse commented Oct 5, 2012

@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

@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

mhulse commented Oct 7, 2012

@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.

mhulse commented Oct 7, 2012

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.

@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.

mhulse commented Oct 9, 2012

@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?

mhulse commented Oct 9, 2012

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

Collaborator

jefflembeck commented Nov 20, 2013

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

Contributor

tomfuertes commented Dec 3, 2013

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

mhulse commented Dec 3, 2013

@tomfuertes interesting findings. Thanks for sharing!

I'm using respond.js and bootstrap.css together to properly show HTML5 stuffs in IE8.
My respond.js in amazon S3 works well if only I enable the CORS in the S3 console, even without any respond proxy things.
But bootstrap.css must be in the same domain. If I use bootstrap.css from S3, the UI breaks down.
I don't know the exact reason but I could fix my problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment