What is CORS and How Does It Work?

What is CORS?

CORS (Cross-Origin Resource Sharing) is security mechanism in web development that allows or prohibits web browsers from making requests to servers on different domains. This is important for ensuring web application security, especially when application interacts with resources on third-party servers.

When web browser tries to make request to server on different domain, it must check if this is allowed by server. This check is called "policy of where resources can be obtained from".

Why is CORS Needed?

CORS was introduced to solve "cross-domain requests" problem in web browsers. Web browsers by default don't allow web pages to make requests to resources on other domains for security reasons. This prevents attacks such as Cross-Site Request Forgery (CSRF) and Cross-Site Scripting (XSS).

For example, if web page from domain example.com tries to request data from server another-domain.com, browser will by default block such request unless server another-domain.com has indicated that it allows access from other domain.

How Does CORS Work?

When browser sends request from different domain (e.g., via AJAX or Fetch), it automatically adds Origin header that indicates domain from which request was made. Server receiving request checks this header and decides whether to allow access to its resources from this domain.

1. Origin Header:
   This is header sent with request that indicates domain from which request was made. Server must check this header and decide whether to allow access.

2. Server Response:
   If server allows access from certain sources, it sends Access-Control-Allow-Origin headers in response. This header indicates which domains can access data.

   Example response header:
   Access-Control-Allow-Origin: https://example.com This means access to resource is allowed only from domain example.com.

3. Request Types:

• Preflight request:
  If request uses non-standard methods (e.g., PUT, DELETE) or headers, browser first sends OPTIONS request (preflight request) to server to find out if server allows such request.

• Simple request:
  If request uses standard methods (GET, POST, HEAD) and standard headers, server can immediately send permission.

4. Preflight Request Response: If request is preflight (OPTIONS), server responds with headers that allow or prohibit such requests, for example: Access-Control-Allow-Methods: GET, POST Access-Control-Allow-Headers: Content-Type Access-Control-Allow-Origin: https://example.com

CORS Advantages and Limitations

• Advantages:
  • Data Protection: CORS helps protect server resources from unauthorized access from other domains.
  • Flexibility: Server can configure CORS to allow access only for certain sources, enabling creation of more secure APIs.
• Limitations:
  • Manual server configuration: To use CORS server must explicitly indicate that it allows access from other domains. This requires additional server configuration.
  • Browser support: CORS works only in browsers that support this security policy. However, most modern browsers support CORS.