Tutorials Home   >   Web Development & APIs   >   What is CORS?

What is CORS?

CORS, which stands for Cross-Origin Resource Sharing, is a security mechanism that controls how resources on a web server can be shared across different websites. It is an important concept in modern web development, especially when working with APIs, AJAX, and frontend-backend communication.

What Does CORS Mean?

CORS stands for Cross-Origin Resource Sharing.

To understand CORS, we must first understand two key terms:

  • Origin: The combination of protocol (http/https), domain (example.com), and port.

  • Cross-Origin: When a request is made from one origin to a different origin.

Example:

  • Website: https://example.com

  • API: https://api.example.com

Because these are different domains, the request is cross-origin.

CORS is a set of rules that tells the browser whether a web application is allowed to access resources from another origin.

Why CORS Is Needed

Browsers follow a security rule called the Same-Origin Policy.

Same-Origin Policy

This policy prevents a website from:

  • Reading data from another website

  • Making unauthorized requests

This protects users from:

  • Data theft

  • Malicious websites

  • Security attacks

However, modern web applications often need to access APIs hosted on different domains. CORS provides a safe way to allow such access.

Simple Real-Life Example of CORS

Imagine an office building:

  • Each office represents a website

  • Doors are locked by default

  • Only authorized visitors are allowed inside

If one office wants to send files to another office, permission must be granted first.

Similarly, CORS works by:

  • Blocking access by default

  • Allowing access only when permission is given

How CORS Works

CORS works by using HTTP headers that control access between origins.

Step 1: Browser Sends a Request

When a web page tries to access a resource from another origin, the browser sends a request.

Step 2: Server Responds with CORS Headers

The server sends back headers that tell the browser:

  • Which origins are allowed

  • What methods are permitted

  • What headers can be used

Step 3: Browser Decides

The browser checks the headers and:

  • Allows the request if permitted

  • Blocks it if not permitted

The browser enforces CORS, not the server.

Common CORS Headers

1. Access-Control-Allow-Origin

Specifies which origin is allowed.

Example:

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

2. Access-Control-Allow-Methods

Specifies allowed HTTP methods.

Example:

  • GET, POST, PUT, DELETE

3. Access-Control-Allow-Headers

Specifies allowed request headers.

4. Access-Control-Allow-Credentials

Allows cookies or authentication information.

Simple Requests and Preflight Requests

CORS requests are divided into two types.

Simple Requests

A simple request:

  • Uses GET or POST

  • Uses standard headers

  • Does not modify sensitive data

The browser sends the request directly.

Preflight Requests

For more complex requests, the browser sends a preflight request first.

  • Uses the HTTP OPTIONS method

  • Asks the server for permission

  • Server responds with allowed rules

  • Actual request is sent only if approved

This improves security.

Common CORS Error

One of the most common errors developers see is:

“Blocked by CORS policy”

This means:

  • The browser blocked the request

  • The server did not allow the origin

This error is a browser security feature, not a server bug.

CORS and APIs

CORS is especially important when working with APIs.

Example:

  • Frontend: https://myapp.com

  • API: https://api.myservice.com

Without CORS:

  • The browser blocks API calls

With proper CORS configuration:

  • The API allows requests

  • Data flows securely

Advantages of CORS

CORS provides several benefits:

1. Improved Security

Prevents unauthorized data access.

2. Controlled Sharing

Servers choose who can access their resources.

3. Supports Modern Web Apps

Allows safe frontend-backend separation.

Disadvantages and Challenges of CORS

Despite its benefits, CORS can be challenging:

1. Configuration Complexity

Incorrect settings can block valid requests.

2. Development Frustration

Beginners often struggle with CORS errors.

3. Browser-Only Protection

CORS does not protect against server-to-server requests.

CORS vs Same-Origin Policy

Feature Same-Origin Policy CORS
Default Behavior Blocks access Allows controlled access
Purpose Security Secure sharing
Flexibility None Configurable

CORS extends the Same-Origin Policy safely.

Real-World Examples of CORS

Web Applications

Frontend and backend hosted on different domains.

Public APIs

APIs that allow access from trusted websites.

Cloud Services

Multiple services communicating securely.

Learning Perspective: CORS

For beginners:

  • CORS explains many browser errors

  • Helps understand web security

  • Builds strong frontend-backend knowledge

Understanding CORS is essential for web developers.

Best Practices for Using CORS

  • Allow only trusted origins

  • Avoid using * for sensitive APIs

  • Use HTTPS

  • Test CORS settings carefully

CORS in Modern Web Development

CORS is widely used in:

  • REST APIs

  • AJAX requests

  • Single-page applications

  • Microservices

It remains a core web security concept.

Conclusion

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls how resources are shared across different origins. It protects users while still allowing modern web applications to access APIs hosted on different domains.