Intro

This is my very first post, and I will take the time to introduce myself while at the same time will share a story about a problem than rather simple to understand was difficult to debug and identify. I wrote my first computer program when I was seven.  My Dad attempted time after time to teach us everything from sports to accounting to me and my brothers.  He has always been a man with a vision.  A couple of years ago I asked him: “Dad, where did you get the idea to put your 7yr old kid in a computer classroom to learn to code? how did you know that was going to be my thing?” his answer rather simple was enlightening: “I tried everything..” - he said in his usually calm voice - “until something worked out for you”

My first day

I remember the brownish color of the C64 keyboard and the excitement and fear of the unknown. Standing in that newly opened code school, I was nervous. This was Tampico, Mexico in 1983, so this sort of thing was kind of revolutionary.  There was something in the air, maybe the mixture of newly opened computers, cardboard, and plastic that got imprinted very deeply in my memory to this day.  I’m very very bad remembering dates but I’m really really good recalling smells. Anyhow, days went by and I learned to print colorful sentences on the screen, variables, constants, loops, you know the drill… Sooner than I expected I had finished those lessons and one day watching my dad entering some accounting information into his C64, I saw something incredible: The program he was using broke and displayed the line of code with the variables that created the exception.  Immediately I jumped in and with my newly acquired knowledge made it run again saving my dad’s information.  I didn’t know the logic, I just jumped in and tried everything until something worked out. I’m my father’s son.

Back to the CORS issue

When using Amazon’s Cloudfront as the application router to cache a Heroku rails server using react for the front end, we created an API that was hosted in a subdomain like this: Webserver:   x1.domain.com API for the front-end:  x2.domain.com Some browserstack tests found that the API invocation was resulting in a CORS issue using IE11. This behavior didn’t occur in google chrome nor safari. Then my train of thought started:

  1. This should be an “IE11 only” issue.
  2. There should be a workaround.
  3. What are the alternatives if there’s no suitable workaround?
  4. How can I isolate the problem so I can make sure what it seems is what it really is?

After some time searching for answers we found that IE has a different approach in identifying certain origins as the “same origin” this resulting in IE removing the “origin” header for some specific origins. (1) About the workaround, I found that we can do something like the reverse proxy method. But that would require changes in the CloudFront configuration and that will complicate things further more. (2) About the alternatives, I found that doing a reverse proxy was the only way to ensure both requests came from the same origin but again that could create some unwanted complexity. (3) Then I started to look for ways to replicate this on my Mac without browserstack involvement. Microsoft has some virtual machines with preloaded windows and IE for this, and after a 3Gb download and some installation time I was ready to get my hands dirty with this problem. (4)

It never was a CORS issue

My idea was to manually create a very simple javascript that did an XHR request to the api so I could see the errors first hand and go from there.  I opened my Chrome browser and copied the request url that the app was using.  It was something like: api.domain.com/endpoint?id=1&json_encoded_variable=%7B%22test%22%3A%22value%22%7D I created my simple javascript using that url and using an activex approach.  And then, to my surprise, it worked.  The part that triggered the error in browserstack still failed.  So I copied both request bodies into a notepad and everything seemed identical but the request was somehow different: api.domain.com/endpoint?id=1&json_encoded_variable={"test":"value"} when I tried that request url with my simple javascript function it failed, giving me that there was a problem with the encoding.   And it was that.

What I figured out

Simple errors like this are hard to debug because of the caching layer in the middle (CloudFront) so my recommendation is to have a flag in your staging javascript that let you choose between the cloudfront instance and the heroku instance. If you send that request to heroku it will tell you the correct problem (encoding) and not mask it as a cloudFront issue,  and this is a big guess: I’m guessing because there was some encoding problem on the request Cloudfront couldn’t get the Origin header and then issued the CORS error. I had to try everything until something worked out. Thanks Dad.