Understanding CORS in HTML

Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers to control how web pages can request resources from different origins (domains). This article provides a detailed breakdown of CORS for both beginners and experienced developers.

What is CORS?

• Definition: CORS is a protocol that allows web applications running at one origin (domain) to request resources from a different origin.
• Purpose: It helps prevent malicious websites from accessing sensitive data from another domain.

Key Concepts

• Same-Origin Policy: A security measure that restricts web pages from making requests to a different domain than the one that served the web page.
• Origin: Defined by the combination of the protocol (http/https), domain, and port. For example, https://example.com:443 is a different origin from http://example.com.

How CORS Works

1. Preflight Requests:
   • Browsers send an OPTIONS request to the server to check if the actual request is safe to send.
   • The server responds with allowed methods and origins.
2. Access-Control-Allow-Origin Header:
   • This header is crucial in the server's response.
   • It specifies which origins are permitted to access the resource.
   • Example: Access-Control-Allow-Origin: https://example.com allows requests only from example.com.
3. Credentials:
   • CORS can be configured to allow credentials (like cookies) to be sent with cross-origin requests.
   • To do this, the server must include: Access-Control-Allow-Credentials: true.

Example Scenario

Imagine a web application hosted on https://app.example.com wants to fetch data from an API located at https://api.anotherdomain.com.

Without CORS:

• The browser blocks the request due to the same-origin policy, preventing access to the data.

With CORS:

• Now, the browser allows the request because the origin is permitted.

The API server at anotherdomain.com adds the following header to its response:

Access-Control-Allow-Origin: https://app.example.com

Conclusion

CORS is essential for modern web applications that need to interact with resources across different domains while maintaining security. Understanding how to configure CORS can help developers build more interactive and secure applications.