{"id":2659,"date":"2019-03-12T16:36:58","date_gmt":"2019-03-12T16:36:58","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2659"},"modified":"2020-10-16T19:19:29","modified_gmt":"2020-10-16T19:19:29","slug":"understanding-cors-errors-in-ionic-apps","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps","title":{"rendered":"Understanding CORS Errors in Ionic Apps"},"content":{"rendered":"

This is a guest post by Rodrigo Fern\u00e1ndez @FdezRomero<\/a>, Full-stack Javascript Developer, Ionic contributor, and co-organizer of the Ionic Madrid<\/a> meetup group.<\/em><\/p>\n

—<\/p>\n

One of the most distinctive features of Ionic is its long-term use and support of web standards, even more so now with Ionic 4<\/a>, which uses Web Components under the hood. This commitment to universal web standards helps web developers decrease the learning curve of building mobile and desktop apps with the same technologies we know and love: HTML, CSS (or SCSS) and Javascript (or TypeScript!).<\/p>\n

<\/p>\n

We can easily deploy these apps as Progressive Web Apps (PWAs)<\/a> to be used directly from the browser, publish them to the app stores by wrapping them in a native shell like Cordova or Capacitor<\/a>, or do both<\/a>. But, the common denominator in each of these situations is that Ionic apps always run in a browser or webview.<\/p>\n

This is great, because no matter the platform, we can use the same web APIs to run our app in iOS, Android, desktop (macOS\/Windows\/Linux with Electron), and even inside browser extensions! It also means that our apps are protected from common attack vectors, like Cross-Site Request Forgery (CSRF)<\/a>.<\/p>\n

One of these protection mechanisms is Cross-Origin Resource Sharing (CORS)<\/strong>, used by browsers and webviews to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons\u2014mainly to protect your user’s data and prevent attacks that would compromise your app.<\/p>\n

An origin<\/strong> is the combination of the protocol<\/strong>, domain<\/strong>, and port<\/strong> from which your Ionic app or the external resource is served. For example, apps running in Capacitor have capacitor:\/\/localhost<\/code> (iOS) or http:\/\/localhost<\/code> (Android) as their origin.<\/p>\n

In order to know if an external origin supports CORS, the server has to send some special headers<\/a> for the browser to allow the requests.<\/p>\n

When the origin where your app is served (e.g. http:\/\/localhost:8100<\/code> with ionic serve<\/code>) and the origin of the resource being requested (e.g. https:\/\/api.example.com<\/code>) don’t match, the browser’s Same Origin Policy<\/a> takes effect and CORS is required for the request to be made.<\/p>\n

CORS errors are common in web apps when a cross-origin request is made but the server doesn’t return the required headers in the response (it’s not CORS-enabled):<\/p>\n

\n XMLHttpRequest cannot load https:\/\/api.example.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http:\/\/localhost:8100’ is therefore not allowed access.\n<\/p><\/blockquote>\n

Depending on the type of request the app tries to make, the browser will need to send a preflight request<\/a> ahead of time in order to know if the external resource supports CORS and if the actual request can be sent safely. If a preflight isn’t needed\u2014like in the case of some simple<\/a> GET<\/code>, POST<\/code> or HEAD<\/code> requests\u2014 the app’s request will be made right away.<\/p>\n

It can be hard to remember all the different CORS headers, what they do, which go in the app versus which go in the server, and if a request is considered simple or if a preflight request is needed.<\/p>\n

That’s why, I gathered all of the common questions and issues from GitHub, the forum, and Slack to contribute a new CORS Errors section<\/a> to the Ionic documentation. It will not only help you to understand CORS better and troubleshoot problems, but it can also be a guide for recommended solutions and best practices depending on your specific scenario. Hope it\u2019s helpful!<\/p>\n

Check out the new CORS Errors<\/a> page in the docs and let us know what you think!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

This is a guest post by Rodrigo Fern\u00e1ndez @FdezRomero, Full-stack Javascript Developer, Ionic contributor, and co-organizer of the Ionic Madrid meetup group. — One of the most distinctive features of Ionic is its long-term use and support of web standards, even more so now with Ionic 4, which uses Web Components under the hood. This […]<\/p>\n","protected":false},"author":60,"featured_media":2661,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[143,51],"class_list":["post-2659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-cors","tag-javascript"],"acf":[],"yoast_head":"\nUnderstanding CORS Errors in Ionic Apps - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding CORS Errors in Ionic Apps\" \/>\n<meta property=\"og:description\" content=\"This is a guest post by Rodrigo Fern\u00e1ndez @FdezRomero, Full-stack Javascript Developer, Ionic contributor, and co-organizer of the Ionic Madrid meetup group. — One of the most distinctive features of Ionic is its long-term use and support of web standards, even more so now with Ionic 4, which uses Web Components under the hood. This […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-12T16:36:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-16T19:19:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rodrigo Fern\u00e1ndez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@FdezRomero\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rodrigo Fern\u00e1ndez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps\"},\"author\":{\"name\":\"Rodrigo Fern\u00e1ndez\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab\"},\"headline\":\"Understanding CORS Errors in Ionic Apps\",\"datePublished\":\"2019-03-12T16:36:58+00:00\",\"dateModified\":\"2020-10-16T19:19:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps\"},\"wordCount\":592,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png\",\"keywords\":[\"CORS\",\"JavaScript\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps\",\"url\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps\",\"name\":\"Understanding CORS Errors in Ionic Apps - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png\",\"datePublished\":\"2019-03-12T16:36:58+00:00\",\"dateModified\":\"2020-10-16T19:19:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png\",\"width\":1440,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding CORS Errors in Ionic Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab\",\"name\":\"Rodrigo Fern\u00e1ndez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g\",\"caption\":\"Rodrigo Fern\u00e1ndez\"},\"sameAs\":[\"http:\/\/savelist.co\",\"https:\/\/x.com\/FdezRomero\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/fdezromero\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Understanding CORS Errors in Ionic Apps - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps","og_locale":"en_US","og_type":"article","og_title":"Understanding CORS Errors in Ionic Apps","og_description":"This is a guest post by Rodrigo Fern\u00e1ndez @FdezRomero, Full-stack Javascript Developer, Ionic contributor, and co-organizer of the Ionic Madrid meetup group. — One of the most distinctive features of Ionic is its long-term use and support of web standards, even more so now with Ionic 4, which uses Web Components under the hood. This […]","og_url":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps","og_site_name":"Ionic Blog","article_published_time":"2019-03-12T16:36:58+00:00","article_modified_time":"2020-10-16T19:19:29+00:00","og_image":[{"width":1440,"height":800,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png","type":"image\/png"}],"author":"Rodrigo Fern\u00e1ndez","twitter_card":"summary_large_image","twitter_creator":"@FdezRomero","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Rodrigo Fern\u00e1ndez","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps"},"author":{"name":"Rodrigo Fern\u00e1ndez","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab"},"headline":"Understanding CORS Errors in Ionic Apps","datePublished":"2019-03-12T16:36:58+00:00","dateModified":"2020-10-16T19:19:29+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps"},"wordCount":592,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png","keywords":["CORS","JavaScript"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps","url":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps","name":"Understanding CORS Errors in Ionic Apps - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png","datePublished":"2019-03-12T16:36:58+00:00","dateModified":"2020-10-16T19:19:29+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png","width":1440,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/understanding-cors-errors-in-ionic-apps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Understanding CORS Errors in Ionic Apps"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a5c597448e38a837222a721957672cab","name":"Rodrigo Fern\u00e1ndez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9dc0a5ba384fa8e997d06aca0ae5948de23c799cf80c2ead3723ce34c88578c3?s=96&d=mm&r=g","caption":"Rodrigo Fern\u00e1ndez"},"sameAs":["http:\/\/savelist.co","https:\/\/x.com\/FdezRomero"],"url":"https:\/\/ionic.io\/blog\/author\/fdezromero"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/03\/cors-errors-ionic.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2659"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2661"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}