Ajax: For Coders not Cleaners

The Problem

While coding on a project recently I ran into a situation while making an API request. The POST request (being sent from my frontend in REACT) in question was running into a security problem. Since I was sending a request from the client-side, it was violating a CORS preflight check and not allowed. After a bit of digging I realized the endpoint I was trying to hit didn’t allow CORS because at the end of the day, it’s just not secure enough when dealing with certain services. Many SAAS services don’t support CORS so I needed to find a way around it for this one step of the verification process. I knew if I could get the POST fetch working from the RAILS backend I wouldn’t have to deal with CORS at all, thus ensuring I would get the precious access token I would need to make any API calls to the site.

There was one issue though. In order to get the access token, a POST request must be sent up with an authorization code value I received from a previous API hit. I was pulling off this value from a redirect URL and putting it in Local Storage (which is only frontend). How could I send this value back to a RAILS controller to be used in the backend fetch? Enter Ajax.

What is Ajax?

AJAX stands for Asynchronous JavaScript And XML and there are a couple key things you need to know about it. AJAX is a way to asynchronously update a web page by exchanging data with a web server. This is important as it allows parts of a page to update without requiring the entire page to reload.

AJAX isn’t a programming language. It simply uses a mix of a browser built-in XMLHttpRequest object to request data from a server and JS/HTML to display the data.

More importantly for my needs, you can send data to the server in the background. This was how I was going to get my authorization code value to my backend Rails server.

How it Works

In React you must first include jquery to use AJAX. In your project directory install it with:

npm install jquery --save

Then use it in any component by:

import $ from "jquery

Here is an example of how I used AJAX for this particular problem.

As you can see, we have a function that will pull the value of “auth_code” from localStorage and send that code to the backend.

The AJAX request starts on line 6. We are making a request object with a url, the type of request, and the data we wish to send back to our Rails server.

url: the path to the controller you want to send the data to

type: the type of request (we are POSTing this information to the controller. Make sure there is a corresponding POST route defined in your backend routes folder)

data: in this case we are converting the the auth_code we pulled from localStorage into JSON.

Let’s drop a byebug in the controller and see if we can access the auth_code.

When byebug stops the code we can look at what the params are and see that we indeed have sent back the auth_code.

Success! Now we can do with it whatever we want!

Tip of the Ajax Iceburg

There are plenty of uses for an AJAX request. To see more you can check out the official docs here.

Happy Coding!