Ajax: For Coders not Cleaners
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 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.