Understanding Same‑Origin Policy and CORS in Web Development

Preface

The author, a senior architect, introduces a common interview question about POST requests and explains that it touches many knowledge points in frontend development.

Same‑Origin Policy

Browsers allow many resources (JS, images, audio, video) to be loaded, but unrestricted access can lead to security problems such as XSS, SQL injection, OS command injection, HTTP header injection, CSRF, etc.

Cross‑site scripting (XSS)

SQL injection

OS command injection

HTTP header injection

Cross‑site request forgery (CSRF)

…

To protect user privacy and data, browsers enforce the same‑origin policy.

What Is Same‑Origin Policy

The same‑origin policy restricts how a document or its scripts can interact with resources from another origin. Two URLs are considered same‑origin when their protocol, host, and port are identical.

Protocol:

Defines how data is exchanged (e.g., HTTP, HTTPS).

Host:

The computer or device connected to a network that provides resources.

Port:

The communication endpoint between processes.

Example comparison of URLs:

URL

Result

Reason

http://test.home.com:8080/dir/page.html

Same origin

Only path differs

https://test.home.com:8080/secure.html

Different origin

Protocol differs (HTTP vs HTTPS)

http://test.home.com:8081/dir/etc.html

Different origin

Port differs

http://online.home.com:8080/dir/other.html

Different origin

Host differs

The same‑origin policy manifests in three areas: DOM access, web data access, and network communication.

DOM Access Restriction:

Scripts cannot access the DOM of a page from a different origin, preventing malicious sites from stealing sensitive information.

Web Data Restriction:

XMLHttpRequest or Fetch can only request resources from the same origin, helping prevent CSRF attacks.

Network Communication Restriction:

Browsers block cross‑origin HTTP responses unless the server explicitly allows them.

CORS

Cross‑Origin Resource Sharing (CORS) is a mechanism that allows controlled cross‑origin requests. Browsers may block the response even if the request is sent, so the server must include appropriate CORS headers.

CORB is a security mechanism that prevents malicious cross‑origin data from reaching the rendering process.

When a page makes an AJAX request to another domain, the browser may send a preflight request first to verify whether the server permits the actual request.

Simple Request

A simple request does not trigger a CORS preflight. It must meet all of the following conditions:

HTTP method is GET, HEAD, or POST.

Allowed request headers are limited to Accept, Accept‑Language, Content‑Language, Last‑Event‑ID, and Content‑Type (only application/x-www-form-urlencoded , multipart/form-data , or text/plain ).

No ReadableStream is used.

No custom request headers are present.

No event listeners are attached to the XMLHttpRequestUpload object.

Preflight Request

For non‑simple requests, the browser automatically sends an OPTIONS request (preflight) before the actual request. The preflight includes special headers such as Access-Control-Request-Method and Access-Control-Request-Headers to inform the server of the intended method and custom headers.

Example of a delete operation:

The server must respond with appropriate CORS headers (e.g., Access-Control-Allow-Origin ) for the browser to allow the actual request.

Requests with Credentials and Wildcards

When a request includes credentials (cookies), the server must not use a wildcard (*) for Access-Control-Allow-Origin . Instead, it should specify the exact origin (e.g., https://example.com ) to avoid leaking user data.

Similarly, Access-Control-Allow-Headers and Access-Control-Allow-Methods should list explicit header names and methods rather than using a wildcard.

Full Request Flowchart

Summary

Preflight requests are automatically issued by browsers as OPTIONS requests during CORS to ensure security and allow the server to decide whether to permit the cross‑origin request.

Cross‑origin requests are blocked by default; a preflight request adds extra headers (Origin, Access‑Control‑Request‑Method, etc.) so the server can evaluate and respond with Access-Control-Allow-Origin and related headers.

Using the preflight mechanism effectively mitigates security risks associated with cross‑origin requests, protecting user data and privacy.