For our capstone project, we encountered a same-origin restriction issue. What this means is that our browsers were preventing our frontend web server to retrieve API responses from our backend server.

The same-origin policy essentially means that modern day browsers will prevent domain A from loading resources from domain B. This is primarily due to security. For example, someone could try to make requests to Wells Fargo from a site using your Wells Fargo cookies. With same-origin policy in place, this activity is restricted (unless explicitly allowed by the server).

There are a few ways around this.

The first is deploying the frontend and backend on the same server. This way, the servers will be under the same domain. This architecture would adhere to the same-origin policy, and would not trigger restrictions within a browser.

Another way to work around this is to have the middleware allow requests from specific domains. There’s an ExpressJS CORS package that allows requests incoming from authorized domains.

Our team has decided to consolidate the frontend and backend under one server. Stay tuned to see how this turns out!