Using gulp-connect-proxy middleware to proxy AJAX requests in gulp-connect
SamAlexander 120000PQMY Comments (2) Visits (23425)
What a funny-sounding blog title. And I've never used "gulp" twice in a sentence before. <Gulp!> What do I mean?
Let's Just Suppose
Consider this situation: You're a front end developer writing a Single Page App (SPA) using some of the fancy frameworks and related tooling: Angular, Bootstrap, Bower, Gulp, Jasmin, Karma, Sass, and what have you. You're slick, so you've also configured your gulpfile to watch Sass and JS files, and when a change is detected, convert the Sass files to CSS, concatenate all your third party JS libs to a single vendor.js, minify CSS and JS files, perform a few other tricks, and finally dump your built SPA into a dist folder.
You scoff at the thought of a inst
You need data from a RESTful service somewhere. Since you're working on a brand spanking new app, things are in flux a bit, but the UI and Service teams have at least agreed on a rough idea of the REST API and their input and output structures, which allows both teams to work independently for a while. As a UI developer, you simply stub the data until the services are built and deployed.
Things are working with your stub data. At some point, the services team deploys an initial version of the real service on a server somewhere. You'd like to quickly do some initial integration testing in your own development environment. Obviously, you can't just make an AJAX call to another domain because of the browser's Same Origin policy.
You've Got Options
You've got a couple of options, like CORS or JSONP. Or maybe you could even run the REST service layer on your own machine. These are all valid options, but this post is about another very simple option: proxying AJAX requests through your local gulp-connect server. In short, all AJAX requests are proxied through the the gulp-connect server (and middleware provided by a plugin called gulp
Configuring a proxy for gulp-connect was super simple. With a quick Google search for "gulp-connect proxy", I quickly discovered gulp-connect-proxy, proxy middleware for gulp-connect. And it's pretty easy to use.
Pretty Easy to Use, Eh?
Delightfully, the gulp-connect-proxy doc takes a mere minute or so to read.
Simply add "gu
Following the example in the doc, first require Proxy.
Lastly, add a middeware object to your existing connect.server input input and set it to the same function as shown in the documentation. Shown below, I used the exact same middleware function because it was exactly what I needed to do. Basically, it lets me make AJAX requests to other domains via the url pattern of http
With that configured, now change your AJAX url in whatever framework you're using to proxy through the gulp-connect-proxy middleware using the URL syntax below. Notice how you're basically prepending the real AJAX url with your server's url and port. The example below is using Angular's $http service.
And that's that! Now your browser is making all AJAX requests through your local gulp-connect server, avoiding cross origin problems. Super-simple setup that lets me quickly do some early integration testing.