{"id":40,"date":"2021-10-22T02:00:06","date_gmt":"2021-10-22T02:00:06","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/musicandcode\/?p=40"},"modified":"2021-10-22T02:00:06","modified_gmt":"2021-10-22T02:00:06","slug":"cors-cors-cors","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/musicandcode\/2021\/10\/22\/cors-cors-cors\/","title":{"rendered":"CORS CORS CORS"},"content":{"rendered":"\n<p>The project plan is approved and my tasks are fixed. I am now the owner of AWESOME APIs. My job was to supply my team-mates with APIs so that they can take care of the cosmetic UI and I deal with APIs and backend hosting. Off we go! <br><br><\/p>\n\n\n\n<p>Learning how to host REST APIs on node was the first step. The 2nd was having it interact a datastore. Thankfully all these topics come with standard npm libraries. I was able to quickly create a console application to prove out these concepts.<br><br><\/p>\n\n\n\n<p>Very quickly, with a standard reference template found on the web, I was able to create RESTful functions. Router.get, Router.patch, Router.post, etc. All these were pretty intuitive for me. <br><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"688\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/router-1024x688.png\" alt=\"\" class=\"wp-image-41\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/router-1024x688.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/router-300x202.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/router-768x516.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/router.png 1530w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After that, I have to learn all about the http status code and what to return depending on the context. It was a lot of details! Some times I do struggle with the temptation of just returning a generic 400 error code, but the perfectionist nature in me pushed me on. I carefully created the error codes and was pretty satisfied. <br><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"216\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/statuscodes-1024x216.png\" alt=\"\" class=\"wp-image-42\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/statuscodes-1024x216.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/statuscodes-300x63.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/statuscodes-768x162.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/statuscodes-1536x323.png 1536w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/statuscodes-1568x330.png 1568w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/statuscodes.png 1662w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/errormsg-1024x557.png\" alt=\"\" class=\"wp-image-43\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/errormsg-1024x557.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/errormsg-300x163.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/errormsg-768x418.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/errormsg-1536x836.png 1536w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/errormsg-1568x853.png 1568w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/errormsg.png 1816w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now it&#8217;s time to complete the end to end REST API. It should have have an example of how to interact with the API along with some test-cases. So i dutifully created a postman suite and test-cases and went on the deploy the application on GCP. (more on this in my next blog post). Everything is working!!<br><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/postman-1024x559.png\" alt=\"\" class=\"wp-image-44\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/postman-1024x559.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/postman-300x164.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/postman-768x419.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/postman-1536x838.png 1536w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/postman-2048x1117.png 2048w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/postman-1568x855.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>At this point, I was feeling really good. I was ahead of schedule and I got the momentum going for me. I felt that I could write all the APIs in 1-2 days. It was a good feeling! So I announced proudly to my team-mates on the teams chat that they are free to use the awesome APIs that I have created. <br><br><\/p>\n\n\n\n<p>After a long wait, my teams chat started to beep constantly with &#8220;Hey I am getting a CORS error&#8221;. &#8220;Hey, it&#8217;s not working&#8221;. &#8220;Are you sure it&#8217;s working?&#8221; <br><br><\/p>\n\n\n\n<p>My feel good period was short-lived and I spent the next few hours into the night trying to make the API work for my team-mates. And it was all down to this 1 line of code that I missed out. (I never had experience with CORs issues. Postman always worked)<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"144\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/cors-1024x144.png\" alt=\"\" class=\"wp-image-45\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/cors-1024x144.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/cors-300x42.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/cors-768x108.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4835\/files\/2021\/10\/cors.png 1526w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Amazing, how 8 hours of googling and research led to this 4 lines of code. It was great again! I learned something too about CORS. <br><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The project plan is approved and my tasks are fixed. I am now the owner of AWESOME APIs. My job was to supply my team-mates with APIs so that they can take care of the cosmetic UI and I deal with APIs and backend hosting. Off we go! Learning how to host REST APIs on&hellip; <a class=\"more-link\" href=\"https:\/\/blogs.oregonstate.edu\/musicandcode\/2021\/10\/22\/cors-cors-cors\/\">Continue reading <span class=\"screen-reader-text\">CORS CORS CORS<\/span><\/a><\/p>\n","protected":false},"author":11709,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/users\/11709"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":3,"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/posts\/40\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/musicandcode\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}