Basic CORS Solution for a Rails/React Application — pt. II
In a previous post I discussed how to complete an initial configuration for cross-origin resource sharing (CORS) that would work in so much as it would allow the developer to make calls from their front end to their back end without running into any issues such as the one below.
However, as I mentioned previously, a basic solution is not going to be the best solution if there is any concern about who should have access to the data contained at the back end. I had the top scores to my game compromised — what if it had been user information like medical history or finances? I’m of the opinion that any application, regardless of importance, should at least attempt to dissuade any of those with ill-intent from gaining inappropriate access.
In order to demonstrate the configuration needed, I set up a demo application. All it does is display a list of countries that has been served up by the rails backend, so nothing too crazy or sensitive, but I think it should work for demonstration purposes. The repository for the front end can be found here, and the back end can be found here. I have also deployed the site here for purposes of the demonstration. As you can see it’s just a basic list of countries — like I said, nothing too crazy.
I decided to wait to deploy the backend until completion of writing this post for purposes of demonstration, so I am serving up the country information on localhost. The site currently looks like this:
On the backend, which once again is not truly live yet, the cors.rb file looks like this:
In this case the wildcard “*” next to “origins” indicates that a site of any origin is permitted to query the API, whether that site wants to simply get information, or perhaps add/delete information it would be permitted. What if instead of having that wildcard/asterisk there, I replaced it with something random like localhost:3001?
That’s all fine and dandy for running my application locally, but now on my live site I am seeing that my fetch attempt has failed. Sad!
In order to add the url of the actual live site, I would suggest the following solution in the cors.rb file:
I’ve allowed localhost:3001 to remain, as it would be useful to have that for purposes of troubleshooting/continued development, and simply added another url to the list of permitted origins. If I wanted to have the different urls to have different resources available, for example only giving some urls access to ‘delete’, I would simply have to add another block starting with “allow do”, but I think that could be included in a post for another time. Now, with all this in place, let’s see what happens when I attempt to make a query to the back end through Postman:
The successful request was definitely not what I was hoping for. Tune in next time to see why that is, and if there is anything that can be done to resolve this — I think that I may have to look in to alternative methods to securing my API. As always, let me know if I’ve missed anything, or made any mistakes!
