CORS Explanation O0O
Tags: beginners, node, webdev, react
Published: 2022-03-17 14:56:00

I used to work on a project that had to do with both the front end and the back end a long time ago. My APIs do not function no matter how many attempts I make, and the CORS error appeared when I opened my browser, but I was unsure of what was wrong. I was only starting out at that stage. I thus attempt to determine what "CORS" is and how it functions, and I discover several great articles.

## What is CORS?

Cross-origin resource sharing is referred to as "CORS."
It's a protocol that specifies certain guidelines for sharing resources from a separate origin, similar to HTTPS.

We are aware that modern web apps include two essential parts.

- Customer side (also known as "client side")

- serving side (also known as "server side")

The server responds to the client's request for data by sending back the requested data. Yes, I know of the typical client-server story.

### The Same-Origin Policy

A web page cannot make requests to a domain other than the one that served it due to browser security. The same-origin policy is the name given to this limitation. A rogue site cannot read sensitive information from another website thanks to the same-origin policy. You might occasionally wish to enable cross-origin queries from other websites to your app. See for further details. [Mozilla] (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) CORS article
 
Alternatively put,

They are often hosted on distinct domains because the client and server are independent applications. As a result, the origin of your own client, who is requesting data from your own server, may alter. In a different situation, you may use some services provided by other parties for authentication, analytics, etc. The basic conclusion is that you will eventually engage with an application whose origin is different from yours. This indicates that you'll use an HTTP request to request resources from the application.

## What exactly is the CORS policy?

The parameters that can be applied to resources to enable cross-origin resource sharing are defined by a CORS policy.

A method called CORS employs an extra HTTP header to tell a browser to give permission for a web application operating on one origin (domain) to access certain resources from a server at a different origin.

A new stanza is added to the reverse proxy configuration file when a CORS policy is attached to an API Access Control resource. The fact that the text in this new stanza was created automatically and shouldn't be changed manually is indicated by a note in the margin. This is done to prevent any human adjustments from having an impact on the management component of API access control. Updates to the CORS policy override any alterations made by an administrator. An illustration of the new stanza:

```
[cors-policy:apiac_policyA]
# *************************************************************************
****************************************# 
THIS STANZA IS AUTO GENERATED. PLEASE DO NOT UPDATE AS IT MAY CAUSE PROBLEMS WITH THE API ACCESS CONTROL COMPONENT
# *************************************************************************
****************************************
handle-pre-flight = false
max-age = 0
allow-credentials = false
allow-origin = http://test.com
request-match = GET /application/endpointA HTTP/*
```

Working on Second part