OJET — Proxy to Backend REST API Server

A guide on how to connect to a Backend Rest API server.

In a development environment we mostly work with REST APIs deployed on a server (backend)which is then consumed by a frontend application. This integration of a frontend framework with the backend is achieved using a proxy server.

1. What is a proxy / proxy server?

A proxy server acts as a gateway between your fontend application and the internet (the backend server). It’s an intermediary which accepts requests from the clients and forwards the same to the backend as if it were the client. Then the backend server responds to the proxy server which then forwards the response to the frontend.

2. Why do we need a proxy server?

Lets take an example to understand its requirement.

Suppose the backend server (REST API) is hosted on domain-b.com and our frontend application during development is running on localhost / domain-a.com (a domain other than domain-b.com). Any HTTP request from the frontend application using XMLHttpRequest (AJAX) or the FETCH API are termed as Cross Origin Requests.

For security reasons, all such cross origin requests from domain-a.com / localhost to domain-b.com are blocked by the browser as the XMLHttpRequest and FETCH API follow the same-origin policy.

3. How to solve this issue in a frontend framework?

All modern frontend frameworks have a packed NodeJs server embedded in it. For frameworks other than OJET I would highly recommend you to checkout Vite which comes with a CLI and has builtin support for all modern frameworks.

We will be working with the OJET Tooling ie. the OJET CLI for our frontend setup.

4. Steps to Install OJET with a proxy to backend:

4.1. Install the OJET CLI using Node Package Manager(npm) from Nodejs.

[sudo] npm install -g @oracle/ojet-cli

4.2. Once you have installed the Oracle JET Tooling, you create a virtual DOM app using the following command:

ojet create your-First-JET-VDOM-app — template=basic — vdom

4.3. Oracle JET tooling uses Express, a Node.js web app framework, to set up and host the web app when you run ojet serve.

The Express configuration options or write Express middleware functions can be modified in Oracle JET’s before_serve.js hook point to add a proxy to our backend server.

If your backend server is hosted on a https server and is sharing Secure cookies via the REST API you will also have to add SSL to the frontend development server.

4.4. Create a self signed certificate using the following command:

NB: If you are on windows use

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

Place the generated key.pem and cert.pem in the root of the project.

4.5. Install http-proxy-middleware using npm to the list of dev-dependencies.

npm install -D http-proxy-middleware

Edit scripts/hooks/before-serve.jsto add SSL and Proxy to the existing Node.js app by creating an instance of the Express app in the hook.

Feel free to edit the object inside the createProxyMiddleware to fit your needs.

Start the OJET server using ojet serve command and send requests to domain-b.com from your localhost in this manner.

https://localhost/api/<routePath> ==> https://domain-b.com/<routePath>

All requests to /api are now rewritten to the backend server and the response is received by the proxy server at https://localhost/api.