Understanding same-origin policy and enable CORS for local development with react

Lets consider the following scenario where a malicious website is trying to cheat you by faking transactions to your bank website

In step 4: A malicious website is reading cookies from some other website. This is bad as once malicious website has this data, it cannot differentiate between the good user and a fake user.

To stop this from happening, browsers implement same-origin policy. What this basically means is that to make a second request, first being the home page, the second request must be from the same origin as the destination.

Source: https://en.wikipedia.org/wiki/Same-origin_policy

In local development, same-origin policy can be an issue. Consider this scenario:

• Our webpack is running on port 3000
• Our node server is running on port 4000

When we go to http://localhost:3000 and this page makes a request for port 4000, it would go into preflight (more on preflight here and here).

To avoid this, there are several solutions we can use:

• Chrome plugin to allow CORS
• Write custom code in your app for preflight to allow CORS for certain domains
• Use proxies

My personal preference is proxies as it requires little code. If written right, this change has little chance to affect your production code.

Option 1: HAProxy

On the mac, you can install haproxy via brew

brew install haproxy

This is how my haproxy file looks like at the root of our react project

Once this is done, we need to start 3 servers:

• our node api running at port 4000
• our webpack at port 3000
• Start haproxy server with haproxy -f proxy.cfg from root of the react folder

Now if we visit http://localhost:9000 haproxy will handle CORS for us.

Option 2: Built in proxies

Many boiler plates come with proxies as part of the code. We are using React-Redux-Starter-Kit and this uses koa-proxy. All we have to do is enable it. Following are the contents of the file at “config/_development.js”

Now all we have to do is

• start our node api running at port 4000
• start our webpack at port 3000

Now if we visit http://localhost:3000, things would work with no issues.