{"id":67849,"date":"2024-11-30T16:12:07","date_gmt":"2024-11-30T10:42:07","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=67849"},"modified":"2025-09-29T17:33:56","modified_gmt":"2025-09-29T12:03:56","slug":"cross-origin-resource-sharing-cors","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/cross-origin-resource-sharing-cors\/","title":{"rendered":"What is CORS?"},"content":{"rendered":"\n<p><a href=\"https:\/\/portal.aws.amazon.com\/gp\/aws\/developer\/registration\/index.html?pg=what_is_header\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>Cross-Origin Resource Sharing (CORS) is a crucial mechanism in web development that enables secure communication between resources hosted on different domains. By default, web browsers enforce the Same-Origin Policy, restricting a webpage from making requests to a domain other than the one that served the page.<\/p>\n\n\n\n<p>Web browsers use a security feature called Cross-Origin Resource Sharing, or CORS, to prevent websites from requesting resources from a domain other than the one that served the website. It gives servers the ability to control who has access to their resources and what sorts of requests they accept.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the Same-Origin Policy (SOP)?<\/h2>\n\n\n\n<p>Understanding the Same-Origin Policy is essential before digging into CORS. As a security precaution, browsers enforce the Same-Origin Policy (SOP), which prevents scripts on a web page from requesting data from a domain, <a href=\"https:\/\/www.guvi.in\/blog\/internet-protocol-and-transmission-control-protocol\/\" target=\"_blank\" rel=\"noreferrer noopener\">protocol<\/a>, or port other than the one that served the page.<\/p>\n\n\n\n<p><strong>Origin<\/strong> comprises:<\/p>\n\n\n\n<ul>\n<li><strong>Protocol <\/strong>(HTTP\/HTTPS)<\/li>\n\n\n\n<li><strong>Domain <\/strong>(example.com)<\/li>\n\n\n\n<li><strong>Port <\/strong>(default 80 for HTTP and 443 for HTTPS, but can vary)<\/li>\n<\/ul>\n\n\n\n<p>For example: &#8211;<\/p>\n\n\n\n<ul>\n<li>Page A is served from https:\/\/example.com<\/li>\n\n\n\n<li>Page B is served from https:\/\/otherdomain.com<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.guvi.in\/hub\/javascript\/what-is-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a> running on page A cannot send an HTTP request to page B due to the same-origin policy unless the server at otherdomain.com specifically permits it using CORS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why CORS is Needed<\/h2>\n\n\n\n<p>Many web applications require interaction with resources (APIs, CDNs, or third-party services) hosted on various origins, which calls for CORS. The same-origin policy would prevent such interactions in the absence of CORS, restricting the functionality of modern web apps.<\/p>\n\n\n\n<p>CORS (Cross-Origin Resource Sharing) serves as an extension of the Same-Origin Policy. While cross-origin queries are blocked by the SOP, CORS permits certain cross-origin requests to be made, but only if the server provides permission. To enable cross-origin resource sharing, the browser must receive particular CORS headers from the server.<\/p>\n\n\n\n<p><strong>Also Read:<a href=\"https:\/\/www.guvi.in\/blog\/open-systems-interconnection-model\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Understanding the Open Systems Interconnection (OSI) Model: A Complete Guide<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How CORS Works<\/h2>\n\n\n\n<p>The way CORS operates is by utilizing HTTP headers to regulate how requests from one origin (http:\/\/example.com) can access resources on another origin (http:\/\/api.example.com).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CORS Request Flow<\/h3>\n\n\n\n<p>A browser automatically includes an Origin header, which identifies the domain from which the request is coming, in any cross-origin HTTP request. After that, the server on the target origin returns specific HTTP headers indicating whether or not to authorize the request.<\/p>\n\n\n\n<ul>\n<li><strong>Request: <\/strong>The Origin header, which includes the requesting site&#8217;s domain, is sent with the request by the browser.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>GET \/resource HTTP\/1.1<br>Host: api.otherdomain.com<br>Origin: http:\/\/mywebsite.com<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul>\n<li><strong>Response: <\/strong>After verifying that the Origin is authorized to access the resource, the server replies with an Access-Control-Allow-Origin header.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>HTTP\/1.1 200 OK<br>Access-Control-Allow-Origin: http:\/\/mywebsite.com<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Important CORS Headers<\/h3>\n\n\n\n<ol>\n<li><strong>Request <\/strong>Headers (by the browser)<\/li>\n\n\n\n<li><strong>Response <\/strong>Headers (by the server)<\/li>\n<\/ol>\n\n\n\n<ul>\n<li><strong>Access-Control-Allow-Origin: <\/strong>Indicates which sources are permitted to use the resource. It can use `*` to accept all sources or specify a specific domain (\ufeff\ufeffhttp:\/\/example.com). Access-Control-Allow-Origin: http:\/\/mywebsite.com<\/li>\n\n\n\n<li><strong>Access-Control-Allow-Methods:<\/strong> Describes the HTTP methods that are acceptable for cross-origin requests, such as GET, POST, PUT, and DELETE. Access-Control-Allow-Methods: GET, POST<\/li>\n\n\n\n<li><strong>Access-Control-Allow-Headers:<\/strong> Indicates which headers (such as Authorization and Content-Type) may be used in the HTTP request. Access-Control-Allow-Headers: Content-Type, Authorization<\/li>\n\n\n\n<li><strong>Access-Control-Allow-Credentials:<\/strong> Indicates whether credentials (such as cookies or HTTP authentication) can be included in the request. Cross-origin requests can include credentials like cookies if this header is set to true. Access-Control-Allow-Credentials: true<\/li>\n\n\n\n<li><strong>Access-Control-Max-Age:<\/strong> Determines how long the results of a preflight request can be cached (in seconds). Access-Control-Max-Age: 86400 (24 hours)<\/li>\n<\/ul>\n\n\n\n<p><strong>Explore: <a href=\"https:\/\/www.guvi.in\/blog\/microservices-communication-via-rabbitmq\/\" target=\"_blank\" rel=\"noreferrer noopener\">Microservices Communication via RabbitMQ<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Simple Requests v\/s Preflight Requests<\/h3>\n\n\n\n<p><strong>Simple requests<\/strong> and <strong>preflight requests<\/strong> are the two categories of cross-origin requests in CORS.<\/p>\n\n\n\n<p>A <strong>simple request<\/strong> is one for which a preflight check by the browser is not required. The request must meet specific criteria to be considered a simple request:<\/p>\n\n\n\n<ul>\n<li><strong>HTTP methods<\/strong> must be one of GET, POST, or HEAD.<\/li>\n\n\n\n<li><strong>Headers:<\/strong> Only a few specific headers, like Accept, Content-Type with specific MIME types, and Origin, are allowed in the request.<\/li>\n<\/ul>\n\n\n\n<p>The browser automatically sends <strong>preflight requests<\/strong> before the real request to see if the server will accept it. This happens for:<\/p>\n\n\n\n<ul>\n<li><strong>Non-simple methods<\/strong> like PUT, DELETE, or PATCH.<\/li>\n\n\n\n<li>Requests that contain <strong>custom <\/strong>headers like Authorization or custom Content-Type.<\/li>\n<\/ul>\n\n\n\n<p>The browser sends an OPTIONS request (the preflight request) to the server, requesting permission to make the actual request. When the browser receives a response from the server indicating that the request is allowed, it makes the actual request.<\/p>\n\n\n\n<p><em>In case, you want to learn more about &#8220;CORS&#8221; and gain in-depth knowledge on <a href=\"https:\/\/www.guvi.in\/blog\/what-is-full-stack-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">full-stack development,<\/a> consider enrolling for HCL GUVI&#8217;s certified <a href=\"https:\/\/www.guvi.in\/zen-class\/full-stack-development-course\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=CORS\" target=\"_blank\" rel=\"noreferrer noopener\">Full-stack Development Course<\/a> that teaches you everything from scratch and make sure you master it!<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Cross-Origin Resource Sharing (CORS) is a crucial mechanism in web development that enables secure communication between resources hosted on different domains. By default, web browsers enforce the Same-Origin Policy, restricting a webpage from making requests to a domain other than the one that served the page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cross-Origin Resource Sharing (CORS) is a crucial mechanism in web development that enables secure communication between resources hosted on different domains. By default, web browsers enforce the Same-Origin Policy, restricting a webpage from making requests to a domain other than the one that served the page. Web browsers use a security feature called Cross-Origin Resource [&hellip;]<\/p>\n","protected":false},"author":47,"featured_media":67972,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[907,294],"tags":[],"views":"7129","authorinfo":{"name":"Shiva Sunchu","url":"https:\/\/www.guvi.in\/blog\/author\/shiva-sunchu\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2024\/11\/Cross-Origin-Resource-Sharing-CORS-300x112.webp","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2024\/11\/Cross-Origin-Resource-Sharing-CORS.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/67849"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=67849"}],"version-history":[{"count":7,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/67849\/revisions"}],"predecessor-version":[{"id":88232,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/67849\/revisions\/88232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/67972"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=67849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=67849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=67849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}