A brief explanation of Cross-Origin Resource Sharing (CORS) concept to enable client application accessing resources from cross domain and HTTP headers involved to enable resource access.
Anuj Sharma
Last Updated Dec 10, 2024
Advertisement
Cross-Origin Resource Sharing (CORS) is a crucial security feature implemented as part of all major web browsers to restrict how web applications access resources across different domains. Here’s a detailed look into how CORS works.
CORS is a mechanism that allows servers to specify which domains are permitted to access their resources. By including specific HTTP headers in their responses, servers can control and restrict access to their data.
All the major browsers use this mechanism to provide access across domains and use HTTP headers to determine whether to allow or restrict access from one domain to another.
Web browsers do the CORS requests in 2 Steps
Specifies which domains are allowed to access the resource. It can be set to a specific domain, "*", or null. It is not advisable to use '*' in production applications, which means resources can be accessed by any browser client and this may cause denial-of-service attack (DoS attack) attack.
Access-Control-Allow-Origin: frontendgeek.com
: Server allows to access resources from frontendgeek.com client
Access-Control-Allow-Origin: *
: Server allows to access resources from any client
Lists the HTTP methods like GET, POST, PUT, DELETE that are permitted for cross-origin requests.
Access-Control-Allow-Methods: GET, PUT, POST
: Server only permits GET, PUT and POST requests from allowed client. In case of sending any other HTTP request like DELETE then server wont process that request and reject it.
Enumerates the HTTP headers that can be used in the actual request.
Indicates whether credentials like cookies can be included in cross-origin requests. Server will process only if it is included as part of the the response HEADER.
When the cross-origin request is made from the client domain (browser) and if it is not allowed by the server’s CORS policy. In this case, the browser restrict the request and generates a CORS error.
There are 2 primary ways to handle CORS error
CORS enhances web security by allowing servers to control access to their resources. Properly configured CORS policies/headers help prevent unauthorized data access and mitigate risks such as Cross-Site Request Forgery (CSRF) and Denial-of-service (DoS) attacks.
domain1.com
makes a GET request to domain2.com/blogs
.domain2.com
responds with the blogs and Access-Control-Allow-Origin: domain1.com
.Access-Control-Allow-Origin
. If domain1.com
is part of the header value, it allows the blogs to be accessed by the web page.domain1.com
wants to send a PUT HTTP request to domain2.com/blogs
.
domain2.com
responds to OPTIONS request with response headers
Access-Control-Allow-Methods: GET, PUT, POST
Access-Control-Allow-Headers: Content-Type
.Access-Control-Allow-Methods
contains the PUT, then browser sends the actual PUT request.Access-Control-Allow-Origin: domain1.com
.Access-Control-Allow-Origin
header. If domain1.com is part of the header value, it allows the resource to be accessed by the web page.
By setting up CORS correctly on the server, your web pages can safely request resources from other domains, keeping your web applications secure.
Advertisement
Advertisement
Advertisement
Anuj Sharma
Last Updated Jan 9, 2025
Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.
Anuj Sharma
Last Updated Jan 29, 2025
Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1
Anuj Sharma
Last Updated Jan 16, 2025
Deep dive into promise.all polyfill in javascript will help to understand the working of parallel promise calls using Promise.all and its implementation to handle parallel async API calls.
Anuj Sharma
Last Updated Jan 9, 2025
Learn the best & quickest way to format phone number in JavaScript with or without country codes. This will help websites to show the phone numbers in a more human-readable format.
Anuj Sharma
Last Updated Jan 17, 2025
Explore the 5 most efficient ways to Refresh or Reload page in JavaScript similar to location.reload(true), and identify the appropriate use cases to use one of these different approaches.
Anuj Sharma
Last Updated Feb 22, 2025
Easy to understand 5 rules, that cover the behaviour of the "this" keyword in different contexts and helps you to master this keyword for any javascript interview.
© 2024 FrontendGeek. All rights reserved