Why do we need Proxy?

In the context of web development, our primary goal to use a proxy is to avoid CORS (Cross-Origin Resource Sharing) “issues” which occur because the browsers enforce Same-Origin Policy to protect the users from XSS among several other types of attacks.

Which, in simpler terms, means that the browsers, for security reasons, restrict requests which are not from the same origin as that of the hosted UI, this prevents attackers from injecting code into our application via ads or plugins to steal our credentials or other sensitive information.

Below is an image from MDN which explains what a CORS-enabled web page performs requests.

But how does the server know whether the requests are coming from the same origin or not? In the form of request headers. The browser appends a request header called origin , for cross-origin requests, to denote which origin the request originated from. The server then has the authority to either allow or reject these origins by providing specific response headers which are parsed by the browsers.

For example, when we load the home page of Google, it makes several requests to different origins. An example of cross-origin requests is shown below:

And in the response, we receive the access-control-allow-* headers which enable the cross-origin communication between these two origins.

The access-control-allow-* headers have various responsibilities, the server can define the authentication mechanisms, acceptable header values and HTTP method types permitted via these headers.