Sep 12, 2019
JavaScript CORS at Its Core (+ Free Phone at the End)
Today I’m about to show you how JavaScript can communicate with outsourced APIs and perform AJAX (Asynchronous JavaScript and XML) tasks with the help of cross-origin resource sharing, or CORS for short. We’ll demonstrate this by building a JavaScript application containing a list of several descriptions that, when clicked, lead to YouTube videos that will help the user win a free smartphone.
We’ll need two separate directories for this project: one for the backend and the other for the frontend. We can build our API, as well as the entire backend, by using Ruby on Rails. So, type in the command line “rails new free-phones-backend” and Rails will set up everything for you from here. To make the frontend directory, just copy what I have pictured below:
We’ll also need two terminals, one for each directory. cd your way into the backend directory so that you can access the Rails server, as you’ll need it to be running for the app to work as it should.
In VS Code, you can set up another terminal by clicking the “+” button below. From here cd your way into the frontend directory, and afterwards leave it as is for now and switch back to the terminal where you’re running your backend directory.
Time to make our free phone API. Now, in the backend directory we’ll only need one model, which is a free phone. A free phone has a description and a YouTube URL. Let’s type in the command line “bundle install” to update your Gemfile, then let’s type in “rails g resource free_phone description url.” We just need two RESTful routes: index and show, as shown below. (Hey, that rhymes!)
Our free_phones_controller.rb should look like this. Note the lack of instance variables here. That’s because our views will be handled by the frontend instead of Rails itself, so there’s no need to use these variables anywhere in our views folder.
db migrate and seed, then fire up the server. We should see this in our browser:
So far, so good, but for our API we don’t need the created_at or updated_at variables. We can clean this up by installing the gem “active_model_serializers” (just copy what I have in the Gemfile and then run “bundle install” again) and typing in the command line “rails g serializer free_phone.”
In our newly created serializer file, which is conveniently located in our newly created serializer folder, we’ll still need our descriptions and URLs to show up in our browser, so just type in what I have below.
…and it works.
Now switch to our frontend terminal. In our index.html file, type “!”, which is an Emmet shortcut that automatically generates an HTML document template for us. We’ll make a few touch-ups as well:
Alright, now for the moment of truth: it’s time for us to run our AJAX. In our index.js file, we want to fetch our free phone API, then console.log our results to test if the fetch worked.
Speaking of our fetch, did it work?
The answer you’re looking for is “no.” That’s where CORS comes into play — you see, CORS, by default, is disabled, so we’ll have to go to the backend (in other words, we have to go back) to install the “rack-cors” gem.
Then make a new cors.rb file under config/initializers:
Eureka! Our backend and frontend are finally connected with one another. No, really — I have the receipts to prove it!
Everything is all set up for us, and it’s all thanks to CORS. So, yeah, we can end it right here, can’t we?
Oh, that’s right — I promised you a free phone at the end of this blog post. Let’s fast-forward and look at our finished app.
Hmmm, this looks promising. Let me just click on this list item, and…
Curses! I can’t believe I just got baited!
Well, regardless, it’s another sign that our app is working as it should, and it’s once again thanks to the magic of CORS. So joke’s on you, app. Joke’s on you.
