Bypassing CORS via custom proxy backend
Tags: engineeringmonday, cors, node, javascript
Published: 2021-12-13 07:53:07

As a frontend developer, sooner or later you will encounter a CORS error, something like this:
```Access to XMLHttpRequest at 'https://...' from origin 'https://...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.```
![CORS error in console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu6jrxx4qxwmart8xf7i.jpg)

## CORS intro
Plainly, [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is a security mechanism which enables web browsers to access data from _domain2.com_ while browsing _domain1.com_. It can also be used to restrict access only to predefined domains. Basically, it requires the backend and frontend to be on the same server or to specifically set allowed origins which can access the backend.

CORS is disabled by default and, if you have access to the server-side code, there are [ways to enable it](https://enable-cors.org/server.html). If you are in a school group project with a backend dev, be sure to remind him/her to enable CORS or you might be stuck with mock data (speaking from experience).

## Inspiration

I first encountered the red CORS error in the browser console on a university project one saturday night when I tried to connect to our Java Spring backend and couldn't get it to work, even though it worked from Postman. Since Java (and specifically Spring) was (and is) almost as Ancient Greek to me, I wanted to try a way to bypass this error. Since CORS is on the browser level, an idea popped up: why not build a simple(r) JS backend which does the same API request, but has CORS enabled so I could connect to it instead of the original Java backend.

## Express backend

[Express.js](https://expressjs.com/) is the first node.js web framework I encountered and is well-suited for this task. We will create a minimal node/express backend application which uses [axios ](https://axios-http.com/docs/intro)as the http library and the [cors](https://www.npmjs.com/package/cors) package to enable CORS on our server (otherwise this whole ordeal would be pointless).

### Project setup and package installation
After creating a folder for our project, open a terminal and navigate to it. We initialize the most basic package.json file with
> `npm init -y`

Once done, we install the required packages:
> `npm i express cors axios`

Before starting to code, we need a file which will be run. Common names are `server.js` or `app.js`. Since this project will have all the code in a single file (not the best practice, but for demonstration purposes), we can simply use `index.js`. Create that file and modify the package.json file so the scripts key looks like this:
```json
 "scripts": {
    "start": "node index"
  },
```

### Coding time

Finally, time to code! Open `index.js` (or whatever you called it in the previous step) so we can create our server. I will copy all the code required here, along with the comments for (almost) each line.
```js
// packages import
const express = require("express");
const app = express();
const cors = require("cors");
const axios = require("axios");
// enable CORS
app.use(cors());
// set the port on which our app wil run
// important to read from environment variable if deploying
const port = process.env.PORT || 5000;

// basic string route to prevent Glitch error
app.get("/", (req, res) => {
    res.send("Hello World!");
});

// the route we're working with
app.get("/users", (req, res) => {
    // replace with a custom URL as required
    const backendUrl = "https://jsonplaceholder.typicode.com/users";
    // return the data without modification
    axios.get(backendUrl).then(response => res.send(response.data));
});

// console text when app is running
app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`);
});
```

And that is it! You can use the above code and upload it to [Glitch](https://glitch.com), for example, so it can be hosted and accessed if you deploy your frontend app. That's why we require reading the PORT from environment variable (if available) and set a root route to return a simple string, otherwise Glitch would belive the app has an error since nothing is returned.

The `"/users"` route contains the main code we need to connect to the backend which doesn't have CORS access enabled and returns the same, unmodified data.

### Additional bonus: data modification

While you can return the data as-is, nothing stops you from modifying the original response to be more adapted to your frontend app's needs. If there is a lot of data and modifications required, that could improve the frontend app's performance on lower-end devices and slower connections, since less _noise_ data will be received and less modifications are required client-side.

Example response from original backend API:
![Original API response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blit2ijzl5etd0vdqn43.jpg)

The code snippet for modifying this is pretty straightforward (assuming the response has the same data structure as above):
```js
    axios.get(backendUrl).then(response => {
        const lastEpisodes = response.data.data.lastAvailableEpisodes;
        const shows = lastEpisodes.map(episode => ({
            id: episode.contentItemId,
            title: episode.caption,
            audioFile: episode.audio.metadata[0].path
        }));
        res.send(shows);
    });
```

Example custom API response after modification:
![Custom API response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjapn34f0kzbp7ztpsav.jpg)

I believe you agree that the second response is much cleaner and easier to follow.

## Conclusion

This was a very basic example of using a custom, bare-bones backend as a proxy to bypass CORS-restricted content you would generally have access to. It also follows a so-called _happy path_, meaning there is no error handling, but that would detract from the topic. The whole process from creating the project, modifying the response and deployment to Glitch can take less than 10 minutes, which is much quicker than waiting for your backend-dev colleague to wake up the next morning when the inspiration is gone.