Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.<\/p>– Cross-origin resource sharing on Wikipedia <\/a><\/cite><\/blockquote>\n\n\n\n
So What Exactly Is It?<\/h2>\n\n\n\n
Say you created a full-stack web application and you want to test it out locally. You’ve selected two different ports to run the frontend and backend:<\/p>\n\n\n\n
- http:\/\/localhost:3000\/ for frontend<\/li>
- http:\/\/localhost:8080\/ for backend<\/li><\/ol>\n\n\n\n
Frontend wants to fetch some data that’s stored in a backend server that’s hosting a database, which is currently running on the address http:\/\/localhost:8080\/ so frontend decides to send a
GET<\/mark><\/code> request to the backend with http:\/\/localhost:3000\/ as the origin point.<\/p>\n\n\n\nDepending on how the backend is setup, one of the three responses will be returned:<\/p>\n\n\n\n
- Send back the requested data along with
Access-Control-Allow-Origin<\/code> (ACAO) header in its response, letting the requester (frontend) know that request from that particular origin (http:\/\/localhost:3000\/) is allowed.
- It may look like:
Access-Control-Allow-Origin: http:\/\/localhost:3000\/<\/code><\/mark><\/li><\/ul><\/li>- Send back the requested data along with ACAO header in its response, letting the requester know that requests from all domains are allowed with a wildcard (
*<\/mark><\/code>).
- It may look like:
Access-Control-Allow-Origin: *<\/code><\/mark><\/li><\/ul><\/li>- An error if the server does not allow a cross-origin request
- If you have the Web Developer Tool on your browser open, you may see it in the console<\/li><\/ul><\/li><\/ol>\n\n\n\n
It’s a way to prevent unauthorized (and unintended) HTTP requests from being made; same-origin security policy<\/a> is also in place for majority of the major browsers used today in order to protect the users of these browsers from ending up in a wrong place. Browsers don’t want users to end up like Dorothy telling Toto “I’ve a feeling we’re not in Kansas anymore<\/em>” like in The Wizard of Oz<\/em>.<\/p>\n\n\n\n
My First Hand Experience<\/h2>\n\n\n\n
As a naive, newbie developer that only had few experiences of coding my own personal website prior to attending OSU, when I took CS290 (Web Development) and CS361 (Software Development I) and was tasked to develop a full-stack web app during these classes, I was destined to encounter and figure out how to handle CORS. <\/p>\n\n\n\n
Spoiler alert<\/span>: I did.<\/p>\n\n\n\n
Even after reaching a point where I’m currently developing a capstone project with my teammate, CORS has still made a comeback and managed to block our path. Since my teammate and myself have looked into this for a good few hours one afternoon\/evening, I’ll be sharing how we resolved it (and later found more material on it).<\/p>\n\n\n\n
The Error<\/h2>\n\n\n\n
Hello CORS error, my old friend, I’ve come to talk with you again<\/figcaption><\/figure>\n\n\n\n So what exactly is going on here? For quick context, we’ve decided to create a React-based frontend with a backend server that’s run on node.js and express for our capstone project (called Kaizen Manager). <\/p>\n\n\n\n
When one of our team members pushed the change to the Github for our project and set up the Pull Request, I decided to test the frontend to backend connection locally, but encountered the above error when we thought we appropriately configured each end of the web app.<\/p>\n\n\n\n
This is the frontend if the backend isn’t properly getting fetched<\/figcaption><\/figure>\n\n\n\n This is the frontend if we successfully get the backend data<\/figcaption><\/figure>\n\n\n\n Backend server that’s on localhost:8080\/ is running fine when we directly access it, and GET request to the \/api endpoint returns the message (data) we’re looking for<\/figcaption><\/figure>\n\n\n\n As we can see in the first image, we’re encountering CORS issue. The backend server on
localhost:8080\/<\/code> isn’t accepting the request getting sent by frontend over onlocalhost:3000\/<\/code>. What should we do?<\/p>\n\n\n\nThe Solutions<\/h2>\n\n\n\n
We’ve come across few solutions over the course of the CORS battle, and I’ll be sharing two of the solutions we’ve found and those that we tried with our project. <\/p>\n\n\n\n
One way is using the cors<\/a> package, the other way is to simply define a proxy.<\/p>\n\n\n\n
cors<\/a> package<\/h3>\n\n\n\n
npm<\/a> is a package manager for Javascript programming language and you can find useful packages created by other developers for you to use in your code. cors<\/a> is one of such handy packages and by installing it to your project, it enables CORS.<\/p>\n\n\n\n
CORS is a node.js package for providing a Connect<\/a>\/Express<\/a> middleware that can be used to enable CORS<\/a> with various options.<\/p>– Readme of the cors Module<\/a>
<\/cite><\/blockquote>\n\n\n\nSo you can install and mark as a dependency to your backend project directory (in package.json)<\/figcaption><\/figure>\n\n\n\n Import cors into your file that’s running the backend server, and if you are using express, use it. Alternatively you can also try to specifically only accept a particular origin, e.g. localhost:3000\/<\/figcaption><\/figure>\n\n\n\n Then from the frontend (this is the App.js file of the React app), point to the backend server<\/figcaption><\/figure>\n\n\n\n Then, the
cors<\/code> module will handle the rest. It’ll allow the request coming from any origin (based on the wildcard*<\/mark><\/code>) or a specified origin (the commented out code example from above) and send the data back, allowing data to flow from backend to frontend.<\/p>\n\n\n\nSet the proxy<\/h3>\n\n\n\n
This was discovered after learning about the cors module. React actually has a very handy way of handling CORS issues by defining
proxy<\/mark><\/code> in thepackage.json<\/mark><\/code> file. See details here<\/a>.<\/p>\n\n\n\nJust define “proxy”… it’s that simple<\/figcaption><\/figure>\n\n\n\n My teammate and I were a little dumbfounded by this simple solution; however, in the official documentation it is noted that this is only works in development (when we run the app using
npm start<\/code>). <\/p>\n\n\n\nIn fact, in the same documentation from create-react-app.dev website, there’s a link on how to enable CORS on ExpressJS<\/a>. This is something I remember attempting to implement in my previous encounter before my capstone project, but did not work. I definitely need to try it out locally and make sure I understand what is going on.<\/p>\n\n\n\n
Lesson Learned<\/h2>\n\n\n\n
After all these encounters with CORS-related shenanigan throughout my web dev study, I find myself realizing that I still got a lot to learn; however, I do find myself becoming better at finding potential solutions and being more comfortable discussing technical problems with my teammate, which is a great asset (skill) in itself. <\/p>\n\n\n\n
In fact, writing this blog post was a great way to better understand the solutions I have found at hand, and I’m excited to continue coding on my capstone project further. So, for now, thank you for reading and,<\/p>\n\n\n\n
Until next time<\/strong>.<\/p>\n\n\n\n
\u2013 Fusako<\/p>\n","protected":false},"excerpt":{"rendered":"
Ever heard of CORS? For those who are not familiar with web development, CORS may be a new concept. It stands for “Cross-Origin Resource Sharing” and there are great online resources that go over the concept such on the MDN web docs or a quick overview provided on the wikipedia page. Here’s a brief description … Continue reading Post #3: Battle of the CORS<\/span><\/a><\/p>\n","protected":false},"author":12815,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/users\/12815"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":6,"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":59,"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/posts\/41\/revisions\/59"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/obataf\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/cors-1024x115.png\")
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/image-2-1024x552.png\")
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/image-3-1024x718.png\")
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/image-1-1024x337.png\")
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/image-5-1024x437.png\")
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/image-6-1024x625.png\")
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/image-7-1024x507.png\")
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6060\/files\/2022\/10\/image-8.png\")