When you try to fetch data from another source, you have to use JSON(Javascript Object Notation). JSON allows the API to be turned into string, that is very easy to move, and then after the fetch, parse it back to an object. By default two separate browser entities cannot access to one another's data, because otherwise they could make changes and pull out sensitive information. However, there are ways to share data across websites.
JSONP - is JSON with padding is an addition to a JSON format and it allows to request the API from another domain. You can only do that if the providing website gives the permission. The way it works, is that you cannot load data cross origin, but you can load Javascript cross origin, so the work around is that you have to wrap the data into a Javascript callback function and pass it that way.
CORS - stands for cross-origin resource sharing, and is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos.
With CORS you can designate the number of URLs that can take data from your website. You can use Access-Control-Allow-Origin: * allow access to any website, however it can be very risky for your application. CORS are very important to be aware of, because one way or another, dealing with data you run into it, and you have to know how to properly deal with it.
Top comments (1)
Alternatively, trying to make requests from
Server-side only will always bypass CORS issues.