Understanding Cross-Origin Resource Sharing (CORS)

by

Cross-Origin Resource Sharing (CORS) is a security mechanism implemented in web browsers to control how resources on a web server can be requested from a different origin (domain, protocol, or port). It is a crucial part of modern web security, helping to prevent malicious cross-site request forgery (CSRF) attacks while allowing legitimate cross-origin requests.

What is CORS?

CORS is a protocol that enables web applications to make requests from one domain to another, overcoming the browser’s same-origin policy (SOP). By default, the SOP restricts web pages from making AJAX requests to domains other than their own. CORS allows the server to specify which domains can access its resources.

How CORS Works

When a web application running in a browser makes a cross-origin request, the browser first checks whether the server allows such requests. CORS defines a set of HTTP headers that allow servers to specify permitted origins and methods.

CORS Headers

  • Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource. Example:
Access-Control-Allow-Origin: https://example.com
Python

  • Access-Control-Allow-Methods: Specifies the HTTP methods permitted for cross-origin requests.
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Python

  • Access-Control-Allow-Headers: Specifies which headers can be used in the request.
Access-Control-Allow-Headers: Content-Type, Authorization
Python

  • Access-Control-Allow-Credentials: Indicates whether credentials (cookies, HTTP authentication) can be included in the request.
Access-Control-Allow-Credentials: true
Python

Preflight Requests

For security reasons, browsers send a preflight request before certain types of cross-origin requests. This is an OPTIONS request sent to the server to verify whether the actual request is allowed. If the server responds with appropriate CORS headers, the browser proceeds with the actual request.

Example of a preflight request:

OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
Python

Server response:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type
Python

Configuring CORS in Different Technologies

Django

Install the django-cors-headers package:

pip install django-cors-headers
Python

Add it to INSTALLED_APPS and configure it in settings.py:

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS = [
    'https://example.com',
]
Python

FastAPI

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://example.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
Python

Common CORS Errors and Fixes

CORS Policy Error:

  • “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
  • Solution: Ensure the server includes the Access-Control-Allow-Origin header.

Preflight Request Failure:

  • “Response for preflight request doesn’t pass access control check.”
  • Solution: Configure the server to handle OPTIONS requests correctly.

Credential Issues:

  • “Credential is not supported if ‘Access-Control-Allow-Origin’ is ‘*’.”
  • Solution: Set Access-Control-Allow-Origin to a specific domain when using credentials.

Conclusion

CORS is an essential security feature that controls how web applications interact with resources on different domains. Understanding and properly configuring CORS ensures secure and efficient communication between client-side applications and backend services. By implementing the correct headers and handling preflight requests, developers can avoid CORS-related errors and improve application security.

Leave a Comment