Reverse Proxy: Two Birds, One Stone

Hey it's been a minute so I thought I should speak upon some nerd shit. You know, for posterity. 

Today's topic will be the reverse proxy. As you may or may not have realized, I was incapable of streaming through most corporate firewalls previously. I use SHOUTcast as my streaming server and the audio comes through on port 2199. I couldn't figure out how to change that on the SHOUTcast side; I don't believe it's possible. I've been operating at such a low level though that it really wasn't pressing. The result was simply that most people (myself included) couldn't listen to Facets - or anything else that I stream - from their work computer. That made me feel like this:

Seriously, I moved on pretty quickly. However, when I started trying to implement the visualization in the dashboard using the Web Audio API (another thing still in progress), I realized I had another, related problem. I couldn't use an audio buffer source for my stream because it never ends. It's impossible for me to fill the buffer since the onload event will never fire; the request never technically "loads". In other words, this shit will not work b:

      var url = "http://usa4.somestreamurl.com/;";
      var request = new XMLHttpRequest();
      request.open("GET", url, true);
      request.responseType = "arraybuffer";

      /* Good luck ever hitting this, dumbass */
      request.onload = function()
      {
         /* Create the sound source */
         soundSource = context.createBufferSource();
         soundBuffer = context.createBuffer(request.response, true);
         soundSource.buffer = soundBuffer;
      };
      request.send();

That meant that I needed to use a media source. No problemo. Oh wait - still one problemo: CORS. For you non developers who are weird enough to be reading this, CORS stands for Cross-Origin Resource Sharing. It basically means that you cant use Javascript to load resources from a domain other than the one your application is running on without consent on the other end. In this case, I was fucked. I can't just make SHOUTcast allow me to make JavaScript requests to resources on their domain. What to do...

With a little elbow grease (aka Google), I had my solution: set up a reverse proxy. The basic idea is that if you are administering a web server, you can set it up as a sort of relay and allow cross-origin access to the resource there. You configure your web server to forward requests meeting the desired criteria to the destination of your choice (in this case, my SHOUTcast URL). Then, on the front end (e.g. Sqaurespace), you send your request to your web server. In IIS, it looks like this:

Click URL Rewrite

Click URL Rewrite

Click Add Rule(s), then Reverse Proxy in the subsequent window and follow instructions

Click Add Rule(s), then Reverse Proxy in the subsequent window and follow instructions

All set

All set

Not sure about Apache and other servers, you're on your own there. Of course, as a side effect of the default IIS configuration the resulting audio is exposed on port 80, which alleviates any port/firewall problems. Pay me.