Let's Learn About CORS!

CORS#

CORS stands for Cross-Origin Resource Sharing, and it's a web security mechanism that allows resources from different origins to interact with each other.
It's a way for web browsers to allow access to resources from other websites.

The image above is from Toss's CORS (Cross-Origin Resource Sharing) page.
The visual summary is really well done and easy to understand at a glance!

CORS is used for purposes like:

• API calls: Allows web applications to call APIs from different domains.
• Loading images and other resources: Allows websites to load images, CSS files, JavaScript files, etc. from different domains.
• Real-time data sharing: Allows web applications to share real-time data across different domains.

Headers#

Here are the CORS values used in request and response headers.

Request headers#

• Origin: Indicates the domain and port number of the website requesting the resource.
• Access-Control-Request-Method: Indicates the HTTP request methods (GET, POST, PUT, DELETE, etc.) that the server allows.
• Access-Control-Request-Headers: Used to inform the server which HTTP headers will be used in the actual request.

Response headers#

• Access-Control-Allow-Origin: Indicates which Origins the server allows access to its resources.
• Access-Control-Allow-Credentials: Indicates whether the server allows requests that include credentials (e.g., cookies, session IDs).
• Access-Control-Expose-Headers: Specifies which response headers can be accessed by client-side scripts.
• Access-Control-Max-Age: Specifies the maximum lifetime of a cached CORS response.
• Access-Control-Allow-Credentials: Indicates whether a response to a request can be exposed when the credentials flag is true.
• Access-Control-Allow-Methods: Specifies the methods allowed when accessing a resource.
• Access-Control-Allow-Headers: Indicates the HTTP request headers the server allows.

Preflight request#

When researching CORS, this is a term that keeps coming up, so I looked into it. It can be translated as a "pre-flight request."

A preflight request uses the OPTIONS method to send an HTTP request to a resource on a different domain to check whether the actual request is safe to send.
Cross-origin requests can affect user data, so they are preflighted like this.

When you see a man of worth, think of how you may emulate him. When you see one who is unworthy, examine yourself.

— Confucius