CORS (Cross-origin resource sharing) is a browser mechanism that enables controlled access to resources located outside of a given domain. CORS(Cross-origin resource sharing) allows you to make requests from one website to another website in the browser, which is normally restricted by another browser security policy called the Same-Origin Policy (or SOP). A Reverse Proxy Server can be set up to configure CORS (cross-origin resource sharing) and resolve issues at client applications while accessing your application’s REST APIs or how to allow a domain to access your application’s REST APIs. There are two ways to solve this issue. Either you need to make a server-to-server API call so that you won’t face the CORS issues, or you can use the miniOrange reverse proxy server which will help you in resolving the CORS issues.
CORS is a method that allows HTTP requests while Same Origin Policy (or SOP) is sharing resources between different websites, but prevents HTTP response information from reading.
CORS protects users’ session data according to the Same Origin Policy (or SOP) by preventing access to resources that are not in the same origin by denying the invalid access to sensitive information, such as the HTTP session data.
CORS is more free, flexible, and functional than Same Origin Policy (or SOP).
CORS provides better error handling by using XMLHttpRequest, hence it is better than JSONP.
CORS is supported on almost all modern browsers, unlike JSONP.
CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request.
Let’s see how CORS feature would work in a scenario where a client of the user, who has enabled the CORS feature, wants to access the user’s server:
Suppose we have two client applications, say Angular and React Native, which are the JS framework based. Now, we want to fetch the WordPress data using the REST APIs, when we make the API calls from the client applications we will receive the CORS (Cross-origin resource sharing) issue which denies access to use the data and resources. To tackle the issue of cross origin resource sharing or cors, a reverse proxy server can be helpful. Let's understand how miniorange reverse proxy can be helpful.
The react native application is hosted on the domain “application.com” and the angular client application is hosted on the domain “newapplication.com”. When a react application with CORS set tries to access the backend application’s API, the API request goes to the reverse proxy server. The Reverse proxy server does the domain check. If the domain matches the react application will grant access. When an angular application tries to access the backend APIs without CORS set up, the reverse proxy server will do the domain check and if the domain doesn’t match, he gets the CORS error of access denied as default.