What is CORS? | Amit Kumar
Post
What is CORS?
Cross-Origin Resource Sharing (CORS) is an HTTP-based security mechanism controlled and enforced by the client (web browser). It allows a service (API) to indicate any origin other than its own from which the client can request resources.
It has been designed in response to the same-origin policy (SOP) that restricts how a website (HTML document or JS script) loaded by one origin can interact with a resource from another origin. CORS is used to explicitly allow some cross-origin requests while rejecting others.
CORS is implemented primarily in web browsers, but it can also be used in API clients as an option. It's present in all popular web browsers like Google Chrome, Firefox, Opera, and Safari. Based on that, we can assume that it is implemented in all currently available and other than listed web browsers.
How does it work?
Everything starts on the client side, before sending the main request. The client sends a CORS preflight request to a service for resources with parameters in HTTP headers (CORS headers). The service responses using the same headers with different or the same values.
The client decides, based on a CORS preflight response, if he can or cannot send the main request to the service. The web browser (client) will throw an error if the response does not meet the requirements of CORS preflight.
CORS preflight requests are sent regardless of the used libraries or frameworks to send requests from web browser. That's why you won't need to conform CORS requirements when working with API from your backend application.
CORS is not going to prevent users from requesting or downloading resources. You can still make a successful request for a resource using apps like curl, Insomnia,
or Postman. CORS is only going to prevent the browser from accessing the resource if the
CORS policy does not allow it.
What is a CORS preflight?
When a browser sends a request to a server, it first sends an HTTP Options request. This is called a CORS preflight request. The server then responds with a list of allowed methods and headers.
If the browser is allowed to make the actual request, it sends the actual request. If not, it shows an error and does not continue to send the main request.
CORS preflight: Server-Client Requests Scheme
CORS Headers
CORS headers are regular HTTP headers that are used to control the CORS policy. They are used in requests where the browser sends a CORS preflight request to the server, and the server responses with:
Access-Control-Allow-Origin indicates what origin can fetch resources. Use one or more origins, e.g.: https://foo.io,http://bar.io.
Access-Control-Allow-Methods indicates what HTTP methods are allowed. Use one or more comma HTTP methods, e.g.: GET,PUT,POST.
Access-Control-Allow-Headers indicates what request headers are allowed. Use one or more headers, e.g.: Authorization,X-My-Token.
Access-Control-Allow-Credentials indicates if sending cookies is allowed. Default: false.
Access-Control-Max-Age - indicates how long the request result should be cached, in seconds. Default: 0.
If you decide to use Access-Control-Allow-Credentials=true, then you need to be aware of the fact you cannot use wildcards * in Access-Control-Allow-* headers. It's required to explicitly list all allowed origins, methods, and headers.
Introduction to Domain mapping Domain mapping is the process of associating a domain name with a website. This allows website owners to create a custom web address that is easy to remember and promotes their brand. In this post, we will discuss what domain mapping is, why it is important, and how to do it.
System Design
What is Proxies? Proxies are a powerful tool that can be used to enhance online privacy, bypass internet censorship, and access geo-restricted content. In this blog post, we will explore the different types of proxies, how they work, and the various ways they can be used.