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!




I love traveling, music, and movies.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to keep team backlog short

In conversation with Http/2

How One Team Went #NoEstimates

beautiful forest

Welcoming RabbitHouse team to Polestar Labs

AssetSonar Release Notes August 2021

AssetSonar Release Notes August 2021

KubeMQ: A Modern Alternative to Kafka

Kafka on Kubernetes Architecture

Control Systems Tutorial

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joseph Patterson

Joseph Patterson

I love traveling, music, and movies.

More from Medium

Christmas Charcuterie

15. Thailand — Uncle Boonmee Who Can Recall His Past Lives

Top Nine Heavy Metal Albums of 2021: Part I

Book Review: Know My Name by Chanel Miller