{"id":3510,"date":"2018-05-03T15:37:27","date_gmt":"2018-05-03T10:07:27","guid":{"rendered":"https:\/\/code4developers.com\/?p=3510"},"modified":"2018-05-03T15:37:27","modified_gmt":"2018-05-03T10:07:27","slug":"cors-anywhere","status":"publish","type":"post","link":"https:\/\/code4developers.com\/cors-anywhere\/","title":{"rendered":"CORS Anywhere"},"content":{"rendered":"

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 enough for back-end team to prioritize fixing it.<\/p>\n

Thankfully, one of my colleagues from the front-end team discovered a workaround the issue which I was not aware of before. Apparently, there is a service called CORS Anywhere<\/a> which is a simple API that enables cross-origin requests to anywhere. It works by proxying requests to these sites via a server.<\/p>\n

Thus, all you have to do to work around CORS is to prepend the URL you want to access with https:\/\/cors-anywhere.herokuapp.com\/<\/code> and spoof an origin header. For example, instead of writing axios.get('https:\/\/example.com')<\/code> you would write as below:<\/p>\n

axios({\r\n    method: 'get',\r\n    url: 'https:\/\/cors-anywhere.herokuapp.com\/https:\/\/example.com\/',\r\n    headers: {'Origin': 'https:\/\/example.com'}\r\n})\r\n<\/pre>\n
This makes a call to https:\/\/example.com<\/code> with origin header set to the one that satisfies CORS policy requirements, and https:\/\/cors-anywhere.herokuapp.com<\/code> returns us the result. Simple yet elegant solution.<\/p>\n
If you don’t want to rely on a 3rd party, you can also set up CORS Anywhere on your machine using npm module cors-anywhere<\/a>. Of course, at this stage you may just as well set up your own proxy on your backend but if for whatever reason you don’t want to do that, keep this option in mind.<\/p>\n
What do you think?<\/h2>\n
I hope you have got, how to use CORS Anywhere<\/strong>. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/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],"tags":[29,25,176,170,167,168,169,22,171,178,177,96],"powerkit_post_featured":[],"class_list":{"0":"post-3510","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-angular","9":"tag-angularjs","10":"tag-api","11":"tag-cors","12":"tag-cors-anywhere","13":"tag-cross-origin","14":"tag-herokuapp","15":"tag-javascript","16":"tag-laravel-angular","17":"tag-libraries","18":"tag-tips-and-tricks","19":"tag-vue"},"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-UC","jetpack-related-posts":[{"id":6553,"url":"https:\/\/code4developers.com\/cors-error-and-its-solutions\/","url_meta":{"origin":3510,"position":0},"title":"CORS Error And Its Solutions","author":"Arif Khoja","date":"March 15, 2020","format":false,"excerpt":"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: Enable CORS Make an HTTP Request from a Server Use Proxy Server Let\u2019s say, you will need to make an\u2026","rel":"","context":"In "JavaScript"","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":5161,"url":"https:\/\/code4developers.com\/getting-started-with-google-maps-places-api\/","url_meta":{"origin":3510,"position":1},"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 "Cloud"","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":3284,"url":"https:\/\/code4developers.com\/nativescript-and-angular-with-android-wear\/","url_meta":{"origin":3510,"position":2},"title":"JavaScript Running On A Wearable? Yes, And Its Native and Angular.","author":"Arif Khoja","date":"March 6, 2018","format":false,"excerpt":"A while ago i was Searching, if it\u2019s possible to use NativeScript and Angular with Android Wear. It\u2019s possible, easy to setup in 5 steps and\u00a0with FlexBox in NativeScript you can even handle small screens. NativeScript is a framework to build truly native apps for iOS and Android based on\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"wearable-apps","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/wearable-apps.png?fit=512%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3216,"url":"https:\/\/code4developers.com\/superstruct\/","url_meta":{"origin":3510,"position":3},"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 "JavaScript"","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":3818,"url":"https:\/\/code4developers.com\/slicepipe-jsonpipe-asyncpipe\/","url_meta":{"origin":3510,"position":4},"title":"Pipes in Angular Part \u2013 4 : SlicePipe, JSONPipe, AsyncPipe","author":"Yatendrasinh Joddha","date":"August 19, 2018","format":false,"excerpt":"Here is the fourth part of angular pipe series in this part we will discuss about SlicePipe, JSONPipe, and AsyncPipe. If you have not read previous articles here is the link for previous articles. Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes Pipes in Angular Part\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3435,"url":"https:\/\/code4developers.com\/angular-5\/","url_meta":{"origin":3510,"position":5},"title":"Angular 5 – Video Tutorials","author":"Nisarg Dave","date":"April 14, 2018","format":false,"excerpt":"Angular version 5 - Googles's popular and open source JavaScript framework for building and developing single page mobile and desktop application. The latest version of Angular, Angular 5 was announced to users in 1st November 2017. Angular 5 is focused on making the Angular application smaller , faster and easier\u2026","rel":"","context":"In "Angular 5"","block_context":{"text":"Angular 5","link":"https:\/\/code4developers.com\/category\/angular5\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3510","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=3510"}],"version-history":[{"count":4,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3510\/revisions"}],"predecessor-version":[{"id":3540,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3510\/revisions\/3540"}],"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=3510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3510"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}