{"id":6553,"date":"2020-03-15T18:47:20","date_gmt":"2020-03-15T13:17:20","guid":{"rendered":"https:\/\/code4developers.com\/?p=6553"},"modified":"2020-03-15T18:47:20","modified_gmt":"2020-03-15T13:17:20","slug":"cors-error-and-its-solutions","status":"publish","type":"post","link":"https:\/\/code4developers.com\/cors-error-and-its-solutions\/","title":{"rendered":"CORS Error And Its Solutions"},"content":{"rendered":"<p>By the end of this short tutorial, you\u2019ll have a better understanding of:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Why CORS error is occurring?<\/li>\n<li>What is CORS? and,<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Find a few ways to fix CORS error:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Enable CORS<!--more--><\/li>\n<li>Make an HTTP Request from a Server<\/li>\n<li>Use Proxy Server<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Let\u2019s say, you will need to make an HTTP request from the client via AJAX to a third-party API or your own API but from a different domain server.<\/p>\n<blockquote><p><em>Here is the sample HTTP Request in JavaScript<\/em><\/p><\/blockquote>\n<pre class=\"theme:github lang:js decode:true \">var xhttp = new XMLHttpRequest();\r\nxhttp.onreadystatechange = function () {\r\n  if (this.readyState == 4 &amp;&amp; this.status == 200) {\r\n    console.log(xhttp.responseText);\r\n  } else {\r\n    console.log(\"error\")\r\n  }\r\n};\r\nxhttp.open(\"GET\", \"https:\/\/maps.googleapis.com\/maps\/api\/place\/details\/json?place_id=ChIJryijc9s0K4gRG9aU7SDTXdA&amp;key=[YOURAPIKEY]\", true);\r\n<\/pre>\n<p>And, you will probably get this annoying\u00a0<strong>CORS<\/strong>\u00a0error:<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"6554\"  data-permalink=\"https:\/\/code4developers.com\/cors-error-and-its-solutions\/cors\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?fit=1024%2C183&amp;ssl=1\"  data-orig-size=\"1024,183\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"cors\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?fit=800%2C143&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?fit=700%2C125&amp;ssl=1\"  class=\" wp-image-6554 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"CORS\"  width=\"696\"  height=\"125\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 696px) 100vw, 696px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-300x54.png\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=300%2C54&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=800%2C143&amp;ssl=1 800w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=120%2C21&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=90%2C16&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=320%2C57&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=560%2C100&amp;ssl=1 560w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=240%2C43&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=180%2C32&amp;ssl=1 180w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=640%2C114&amp;ssl=1 640w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=700%2C125&amp;ssl=1 700w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?resize=768%2C137&amp;ssl=1 768w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors.png?w=1024&amp;ssl=1 1024w\" ><\/p>\n<blockquote><p><em>Recommended <\/em><strong>\u2192<\/strong>\u00a0<a href=\"https:\/\/code4developers.com\/getting-started-with-google-maps-places-api\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Get User Location with Javascript (opens in a new tab)\">Get User Location with Javascript<\/a><\/p><\/blockquote>\n<p>The error says\u2026<\/p>\n<p>The browser is blocking the response from Google Places API.<\/p>\n<p>The output response object is coming from the Google Places API and does not have an \u201cappropriate header\u201d to let the browser get data from a different domain.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"6555\"  data-permalink=\"https:\/\/code4developers.com\/cors-error-and-its-solutions\/ezgif-com-crop\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?fit=480%2C196&amp;ssl=1\"  data-orig-size=\"480,196\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"CORS Gif\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?fit=300%2C123&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?fit=480%2C196&amp;ssl=1\"  class=\" wp-image-6555 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"CORS Gif\"  width=\"608\"  height=\"249\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 608px) 100vw, 608px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-300x123.gif\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?resize=300%2C123&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?resize=120%2C49&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?resize=90%2C37&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?resize=320%2C131&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?resize=240%2C98&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop.gif?resize=180%2C74&amp;ssl=1 180w\" ><\/p>\n<p>Oke. The next question you\u2019ll probably ask is\u2026<\/p>\n<p>Why is that?<\/p>\n<p>Well\u2026<\/p>\n<p>By default, browsers will only allow communication between client and server as long as they are in the same domain.<\/p>\n<p>That is called\u00a0<strong>Same Origin Policy<\/strong>\u00a0and it\u2019s enabled in the browsers by default for security reasons.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"6560\"  data-permalink=\"https:\/\/code4developers.com\/cors-error-and-its-solutions\/cors-works-browser-address-bar-1536x960-2\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?fit=1527%2C845&amp;ssl=1\"  data-orig-size=\"1527,845\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"cors-works-browser-address-bar\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?fit=800%2C443&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?fit=1160%2C642&amp;ssl=1\"  class=\" wp-image-6560 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"cors-works-browser-address-barcors-works-browser-address-bar\"  width=\"720\"  height=\"399\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 720px) 100vw, 720px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2-300x166.png\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=300%2C166&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=800%2C443&amp;ssl=1 800w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=1160%2C642&amp;ssl=1 1160w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=120%2C66&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=90%2C50&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=320%2C177&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=560%2C310&amp;ssl=1 560w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=240%2C133&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=180%2C100&amp;ssl=1 180w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=640%2C354&amp;ssl=1 640w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=1120%2C620&amp;ssl=1 1120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=768%2C425&amp;ssl=1 768w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?resize=700%2C387&amp;ssl=1 700w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/cors-works-browser-address-bar-1536x960-2.png?w=1527&amp;ssl=1 1527w\" ><\/p>\n<p>When you are typing Google API URL on the address bar,\u00a0you\u2019re sending a request from a Google server which is the same domain that you\u2019re going to get a response from.<\/p>\n<p>That is the\u00a0<strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Same-origin_policy\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Same Domain Policy (opens in a new tab)\">Same Origin Policy<\/a><\/strong>\u00a0and it will work!<\/p>\n<p>But the real question is\u2026<\/p>\n<p>How to make a request via AJAX from the client without getting the CORS error.<\/p>\n<p>Before finding the solution\u2026<\/p>\n<p>Let\u2019s see<strong><em>,<\/em><\/strong><\/p>\n<h2 id=\"what-is-cors\"><strong>What is CORS?<\/strong><\/h2>\n<p>CORS stands for\u00a0<strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Cross-origin_resource_sharing\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Cross-Origin Resource Sharing (opens in a new tab)\">Cross-Origin Resource Sharing<\/a><\/strong>.<\/p>\n<p>It\u2019s a security mechanism that will allow any client to consume data from any domain.<\/p>\n<p>Most of the API service providers will have CORS enabled in their response object as they are meant to be consumed by different domains.<\/p>\n<p>But it\u2019s not in all the cases.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"6561\"  data-permalink=\"https:\/\/code4developers.com\/cors-error-and-its-solutions\/ezgif-com-crop-1\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?fit=480%2C193&amp;ssl=1\"  data-orig-size=\"480,193\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"CORS-Enabled\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?fit=300%2C121&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?fit=480%2C193&amp;ssl=1\"  class=\" wp-image-6561 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"CORS-Enabled\"  width=\"539\"  height=\"217\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 539px) 100vw, 539px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1-300x121.gif\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?resize=300%2C121&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?resize=120%2C48&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?resize=90%2C36&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?resize=320%2C129&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?resize=240%2C97&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/03\/ezgif.com-crop-1.gif?resize=180%2C72&amp;ssl=1 180w\" ><\/p>\n<p>Let\u2019s see how to fix the CORS error.<\/p>\n<h2 id=\"enable-cors\"><strong>Enable CORS<\/strong><\/h2>\n<p>Let\u2019s say you have a client-side app and server-side API in two different domains that you manage.<\/p>\n<p>You can simply enable\u00a0<strong>CORS<\/strong>\u00a0by adding the following header to the response object on the server-side API [NOT IN THE CLIENT] to let the browser know that you have CORS enabled.<\/p>\n<p>In the below example, I have added the code inside middleware in the response object in node.js.<\/p>\n<pre class=\"theme:github lang:js decode:true \">app.use(function(req, res, next) {\r\n  res.header(\"Access-Control-Allow-Origin\", \"YOUR-DOMAIN.TLD\"); \/\/ update to match the domain you will make the request from\r\n  res.header(\"Access-Control-Allow-Headers\", \"Origin, X-Requested-With, Content-Type, Accept\");\r\n  next();\r\n});<\/pre>\n<p>And everything will work fine!<\/p>\n<p>But\u2026<\/p>\n<p>What if I am trying to get data from a third-party API like Google Places API that I do not have access to enable CORS?<\/p>\n<h2 id=\"making-http-requests-from-the-server\"><strong>Making HTTP Requests From The Server<\/strong><\/h2>\n<p>In that case, you can make an HTTP request from your own server rather than the client.<\/p>\n<p>This is because the\u00a0<strong>Same Origin Policy<\/strong>\u00a0is not applicable when server-to-server communication is happening.<\/p>\n<h2 id=\"use-proxy-server\"><strong>Use Proxy Server<\/strong><\/h2>\n<p>Rather than using your own server, you can use a proxy server from the client making an HTTP Request.<\/p>\n<pre class=\"theme:github lang:js decode:true \">https:\/\/cors-anywhere.herokuapp.com\/<\/pre>\n<p>for more details you can refer this article <a href=\"https:\/\/code4developers.com\/cors-anywhere\/\">CORS Anywhere<\/a> \ud83d\ude00<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Now, you have a better understanding of why the CORS error is occurring and how browsers behave.<\/p>\n<p>I also showed you how to fix the CORS error so that when you get the CORS error you stop panicking like I used to do.<\/p>\n<p>I hope it helps!<\/p>\n<p>If you have any questions or if anything is unclear, feel free to reach out to me by simply commenting below.<\/p>\n<p>Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By the end of this short tutorial, you\u2019ll have a better understanding of: Why CORS error is occurring? What is CORS? and, Find a few ways to fix CORS error:&hellip;<\/p>\n","protected":false},"author":7,"featured_media":3518,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,32,33],"tags":[170,308,310,168,309],"powerkit_post_featured":[],"class_list":{"0":"post-6553","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-current","9":"category-programming","10":"tag-cors","11":"tag-cors-error","12":"tag-cors-in-api","13":"tag-cross-origin","14":"tag-javascript-cors"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/cors-1.png?fit=375%2C210&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-1HH","jetpack-related-posts":[{"id":3510,"url":"https:\/\/code4developers.com\/cors-anywhere\/","url_meta":{"origin":6553,"position":0},"title":"CORS Anywhere","author":"Arif Khoja","date":"May 3, 2018","format":false,"excerpt":"After a recent domain change at my workplace one of the API endpoints became inaccessible due to some configuration problems resulting in incorrect behavior in regards to cross-origin resource sharing policy. It interfered with one non-critical function of the website and was a bit of a nuisances but not big\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/cors-1.png?fit=375%2C210&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3216,"url":"https:\/\/code4developers.com\/superstruct\/","url_meta":{"origin":6553,"position":1},"title":"Superstruct","author":"Arif Khoja","date":"January 31, 2018","format":false,"excerpt":"I stumbled upon this GitHub project a few days ago. It\u2019s called Superstruct, and it looks like an awesome way to validate data in JavaScript. Let me explain. You probably want to make sure that you get the kind of data you expect as input in JavaScript, either from your\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5161,"url":"https:\/\/code4developers.com\/getting-started-with-google-maps-places-api\/","url_meta":{"origin":6553,"position":2},"title":"Getting started with Google Maps Places API","author":"Arif Khoja","date":"October 17, 2019","format":false,"excerpt":"If you want to get all of the restaurant data from a specific city by text search in your application, you have come to the right place. In this tutorial, you\u2019re going to learn how to do exactly that using Google Maps Places API. Also, I will be covering how\u2026","rel":"","context":"In &quot;Cloud&quot;","block_context":{"text":"Cloud","link":"https:\/\/code4developers.com\/category\/cloud\/"},"img":{"alt_text":"places-api","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/10\/places-api.png?fit=1026%2C1200&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2610,"url":"https:\/\/code4developers.com\/semicolon-in-javascript\/","url_meta":{"origin":6553,"position":3},"title":"Importance of Semicolon [;] In JavaScript","author":"Yatendrasinh Joddha","date":"June 19, 2017","format":false,"excerpt":"It is said that in JavaScript semicolons are not compulsory. It's true, because JavaScript automatically inserts a semicolons at required place and it is know as \"Automatic Semicolon Insertion\". This behavior of JavaScript confuses us a lot. This article is written for those who have just started writing JavaScript and\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4109,"url":"https:\/\/code4developers.com\/tap-for-quick-debugging\/","url_meta":{"origin":6553,"position":4},"title":"Tap for quick debugging","author":"Arif Khoja","date":"March 17, 2019","format":false,"excerpt":"This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print. function tap(x) { console.log(x); return x; } Why would you use instead of good old\u00a0console.log? Let me show you an example: bank_totals_by_client(bank_info(1, banks), table)\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3824,"url":"https:\/\/code4developers.com\/restful-api-best-practices\/","url_meta":{"origin":6553,"position":5},"title":"RESTful API best practices and Designing guidelines\u200a","author":"Arif Khoja","date":"July 5, 2018","format":false,"excerpt":"Facebook, Google, Github, Netflix and few other tech giants have given a chance to the developers and products to consume their data through APIs, and became a platform for them. Even if you are not writing RESTful API for other developers and products, it is always very healthy for your\u2026","rel":"","context":"In &quot;Web Services&quot;","block_context":{"text":"Web Services","link":"https:\/\/code4developers.com\/category\/web-services\/"},"img":{"alt_text":"rest_api","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/rest_api.png?fit=406%2C430&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/6553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=6553"}],"version-history":[{"count":2,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/6553\/revisions"}],"predecessor-version":[{"id":6563,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/6553\/revisions\/6563"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3518"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=6553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=6553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=6553"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=6553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}