Calling api within Create-react-app

Most of frontend application need to fetching data from server side to display data. After some try and error this is how I developed and deployed react application

Development - proxy for stay away from CORS

Update: React supports a better way by using proxy. I pushed the link in the bottom of this post.

The most painful things is CORS, at the first time I always need to inject Access-Control-Allow-Origin to the header for supporting calling api from localhost.

Using the proxy like this you can call the api from /api/v1

app.use(
  '/api/v1',
  proxy({
    target: 'http://xx.yy.zz.zzz/',
    changeOrigin: true,
    onProxyReq(proxyReq, req) {
      if (proxyReq.getHeader("origin")) {
        proxyReq.removeHeader("origin")
      }
    }
  })
);

Every requests to /api/v1 will be forwarded to http://xx.yy.zz.zzz/api/v1.
Be notice how the path will be applied. The more information can be found here.

Deployment - using nginx for serving and forward api

I used an nginx instance to serve static file and forward the api. The configuration can be like this

// nginx.conf

server 
{
  listen 80;
  location / {
      root /usr/share/nginx/html;
      index index.html index.htm;
      try_files $uri $uri/ /index.html =404;
  }

  location /api/v1/ {
    proxy_pass http://xx.yy.zz.zzz/api/v1/
  }
}

Every requests will be forwarded also. Do notice of the path, that’s a slight difference between 2 methods.

Tell me if you have any better ideas.

Update: this is the better way to make the request, by using proxy.