Same-Origin vs. Cross-Origin

• Same-Origin HTTP Request:

  A same-origin HTTP request is a request to a specific resource located at the same domain, using the same protocol, and the same port number as the client making the request.

  Example:

  • Client URL: http://example.com:80/page.html
  • Resource URL: http://example.com:80/api/data
  • This is a same-origin request because the domain (example.com), protocol (http), and port (80) match.

• Cross-Origin HTTP Request:

  A cross-origin HTTP request is a request to a resource where any of the domain, protocol, or port differs from the client’s origin.

  Example:

  • Client URL: http://example.com:80/page.html
  • Resource URL: https://api.example.com:443/data
  • This is a cross-origin request because the protocol (http vs. https) and port (80 vs. 443) differ.

CORS Protocol Overview

The CORS protocol is enforced only by browsers to ensure secure cross-origin requests. It involves a set of HTTP headers exchanged between the client (browser) and the cross-origin server to determine whether the response should be accessible to the client.

• The browser sends specific CORS request headers to the cross-origin server.
• The server responds with CORS response headers.
• Based on the response headers, the browser either allows access to the resource or blocks it, showing a CORS error in the browser console if access is denied.

Steps in the CORS Process

1. Browser Detects Request Type:

   When a request for a resource is made from a web page, the browser determines whether it is a same-origin or cross-origin request. If it’s a cross-origin request, the browser applies the CORS policy.

2. Sending the Origin Header:

   The browser includes an Origin header in the request to the cross-origin server, specifying the origin of the client making the request.

   Example Request Header:

   Origin: <http://example.com>
   
   

3. Server Response with CORS Headers:

   The cross-origin server processes the request and responds with a header called Access-Control-Allow-Origin, indicating which origins are allowed to access the resource.

   Example Response Header:

   Access-Control-Allow-Origin: <http://example.com>
   
   

4. Browser Validates Response:

   The browser compares the value of the Access-Control-Allow-Origin response header with the Origin header sent in the request.

   • If the Access-Control-Allow-Origin value matches the Origin header (or is for public resources), the browser allows the web page to access the response.

   • If the values do not match or the header is missing, the browser blocks access and displays a CORS error in the console, e.g.:

     Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <https://api.example.com/data>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
     
     

Example Request and Response Headers

Simple Cross-Origin GET Request

Request Headers (sent by the browser):