In every website I have ever made I usually make the back-end API using NodeJS and run it on a certain port and make the front-end using React and run it on a different port and make requests to my NodeJS API. Is this the optimal approach to making a web app where I don't want anyone but my front end to access my API? If this is the case what would be the best way to protect my API from being used by anyone but my front end?

  • 3
    You are asking two questions here, "What are some architectural approaches to web applications" and "How would I protect access to my API?". You should ask these two questions separately, and the second question probably belongs somewhere other than here. You should try searching for these questions first as it is likely they have both been answered well before. – Ben Dec 15 '17 at 6:24
  • Changing the port number will not secure your API in any way. It's not even decent security by obscurity. Anyone with a web browser who knows how to inspect your page can figure out the port number you are using. – Robert Harvey Dec 15 '17 at 16:03

I'm assuming your front end React code is going to run on browsers, on machines that you do not control and that are operated by members of the public.

In that case you should probably give up attempting to restrict what code can access your API. Think about the people who are accessing your API, and apply authentication and authorisation systems to them if necessary, but don't attempt to authenticate your front end code.

Your front end code is just a tool that you supply to those people so that they can use your API without doing their own programming. If they don't like it there's very little you can do to stop them reverse-engineering it and using alternative tools to interact with your server side code.

On the other hand it's possible that you are running React on the server side only. In that case you can restrict other applications from connecting to the backend by putting both parts behind a network firewall together, or inside a private network that other people can't access.

| improve this answer | |

I've made many web servers that feed both RESTful APIs and HTML requests on the same server. It is nothing more than an issue of routing requests to the proper handler. The fact that a web server handles both is just a matter of preference.

You are a habit of the tools you use.

Angular can easily build and deploy a front-end with just ng serve on the command line, and a NodeJS RESTful back-end is as easy as npm start.

That's how you've learned to do it, and there is nothing wrong with that.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.