V School Request Forwarding/CORS Documentation
Browsers use a security feature to inhibit HTTP calls from one website to another called the "Same Origin Policy." If you want to consume information from an API on your frontend client (meaning your frontend client is making an HTTP request directly to an API), one of 3 things needs to be true:
- The API you're calling to has explicitly enabled CORS (Cross Origin Resource Sharing). This doesn't happen all that often. APIs like the Pokemon API and the Star Wars API have, which is why you've been able to get information from them without problems.
- The API you're calling to has to enable JSONP, and you have to make a JSONP call from your client. JSONP stands for JSON with Padding. The specifics are outside the scope of this post, but just know that it allows you to get info from the API directly.
- You need to write a server to relay requests for you. The server doesn't have the Same Origin Policy restriction that browsers have, so you would make a request to your own server, your server would make the request to the API, the API sends data to your server, and your server sends it back to you.
Since you haven't learned how to write a server yet, we wrote a simple request forwarder for you!
V School Forwarder Documentation
Base URL
https://cors.vschool.io
How to use
Make a GET or POST request from your client to the Base URL with a query parameter of url. Set the value of url to the URL of the API you want to get info from.
Note: If making a POST request, include your request body like you would normally, and the forwarder will pass it along for you.
Query parameters allow you to provide additional information in the URL of your request. You may have noticed a ? and possibly some & scattered in your url bar before. For example, when you do a google search for "cors", the URL changes to:
https://www.google.com/search?q=cors
In that URL, ? indicates the beginning of a "query string". Think of them like key-value pairs: q is the key, cors is the value. (Separated in the URL by =).
Example
Say you want to get a random joke from the Chuck Norris Database. According to the docs, the URL to get a random joke is https://api.chucknorris.io/jokes/random
Using the V School CORS API, you would make your request to:
https://cors.vschool.io?url=https://api.chucknorris.io/jokes/random
Everything else should work relatively smoothly.
The V School CORS request forwarder is pretty limited right now. It will only work on APIs that don't require authentication of any kind. Maybe in the future we'll add that capability.
You won't want to use this resource forever or for everything. If the API you're accessing allows front-end access, use it like normal! Once you learn how to write your own server, do it that way instead! But in a pinch, cors.vschool.io is here for you to use on your toy projects. :)
Have fun accessing APIs!
CORS Anywhere
If the V School request forwarder isn't working for some reason, there is a service that is easy to use but requires you to manually “request temporary access to demo server” about once a day.
http://cors-anywhere.herokuapp.com/corsdemo
Click “request temporary access to demo server” about once a day. If it suddenly shows that it is forbidden, chances are you need to click that button again. If you get a “too many times” warning, you’ve gone over the 50 call per hour limit.
This endpoint works similar to the one you'll find in the following documentation, but without the ?url= . In the following example you'll see the base router url followed by the api's url that's blocked by CORS:
https://cors-anywhere.herokuapp.com/https://api.icndb.com/jokes/random
You may need to use postman to make sure you have all required headers. You may get helpful errors in that department. I needed to add "X-Requested-With: origin" to the headers in Postman.