๐ What is CORS?
CORS stands for Cross-Origin Resource Sharing. It is a security mechanism built into web browsers. Usually, a website can only request data from the same domain where it is hosted. For example, if your website is running on https://example.com, it cannot directly fetch data from https://anotherwebsite.com due to security restrictions. This rule is called the Same-Origin Policy.
CORS provides a controlled way for websites to request data from another domain, provided the target server allows it by setting specific headers.
๐ Why do We Need CORS?
CORS is needed to protect users and data. Without CORS, any website could secretly request your private information from another site where you are logged in. This would create significant security risks.
At the same time, developers need a way to access APIs and external resources (like fonts, images, or data from other servers). CORS makes this possible in a safe and secure manner by requiring the server to state which domains are allowed to access its resources explicitly.
๐ How does CORS Work?
When a browser makes a cross-origin request (requesting data from another domain), it checks for special CORS headers in the serverโs response. The most important one is.
Access-Control-Allow-Origin: https://c-sharpcorner.com
This header tells the browser that the domain https://c-sharpcorner.com is allowed to access the resource.
If the server does not send this header, the browser blocks the request for security reasons.
๐ Example of CORS in Action
Example 1. The server allows all domains
Access-Control-Allow-Origin: *
This means any website can access the serverโs resources.
Example 2. The server allows only one domain
Access-Control-Allow-Origin: https://c-sharpcorner.com
This means only https://c-sharpcorner.com can request data.
Example 3. JavaScript Fetch Request
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
If the server has proper CORS headers, this request works. If not, the browser blocks it.
๐ฆ Preflight Requests
Some requests are considered more sensitive, such as those that use custom headers or HTTP methods (e.g., PUT, DELETE). In these cases, the browser first sends an OPTIONS request, known as a preflight request, to verify if the server allows it.
If the server responds with proper CORS headers, then the real request is sent.
โ
Benefits of CORS
Improves Security: Prevents malicious websites from accessing sensitive data.
Controlled Sharing: Servers decide who can access their resources.
Enables API Usage: Developers can safely use third-party APIs.
Flexibility: Works with multiple domains and allows complex requests when needed.
๐ Summary
CORS (Cross-Origin Resource Sharing) is a browser feature that helps strike a balance between security and flexibility in web development. It prevents unauthorized cross-origin requests while allowing safe communication between different domains when the server explicitly permits it. Without CORS, modern web apps would not be able to use APIs, external services, or shared resources securely.