DEV Community: Imiebo Godson

Fixing the CORS error by hosting your own proxy on Heroku

Imiebo Godson — Sun, 21 Mar 2021 23:16:43 +0000

From a beginner playing around with basic web APIs to an experienced developer building real-world solutions, we can all agree that consuming real-time data from web APIs is a very vital part of building truly functional and dynamic web applications.

One common error that is encountered during this client-to-server interaction is the famous CORS error that is a result of the CORS policy that is being implemented by most servers now.

It was introduced to defend against the infamous Cross-site request forgery. Even though you are aware that the CORS initiative is a good form of security against a very terrible attack, as a developer running into the CORS error is never a pleasant one so this article is an attempt to bypass the error and not let it affect the performance of your web applications that need to interact with APIs to get data of some form.

Creating your own Heroku proxy server app

In the following steps what we trying to achieve is to host our own proxy server that will help us avoid the dreaded CORS error when trying to get data from web APIs in our future API ventures.

For that, we are going to be using the CORS-Anywhere proxy that was developed by Rob Wu. It is a Node.js reverse proxy that adds CORS headers to our API requests. So... let's jump right in.

Step 1: Setting up your Heroku Account (If you don't already have one)

For us to host our proxy server on the web we will require a Heroku account.

Heroku is a cloud application platform for both client-side and server-side projects. It is going to allow us to host our own proxy server app online so that we can always access/use it when we want.

To start we need to go to the Heroku site, where you can register for an account for free or login if you already have one.

Step 2: Downloading Node and the Node Package Manager (NPM) (If you don't have it installed already)

With your Heroku account registered and confirmed, we need to move on to installing NPM and Node on our PC.

NPM is a package manager, it was initially used for managing Nodejs packages, hence, the name, but it is now used to handle almost all types of packages that come with the development of web apps.

Node is a Javascript runtime environment built on Chrome's V8 Javascript engine. It basically allows you to run Javascript code outside your browser, in environments like your terminal.

To get both the node and npm on your PC, we will only need to download and install the pre-built node installer, and for that, we will head to the Nodejs download page.

You can choose the download package you want based on the OS you have running on your PC.

Once you are done with the download, open the installer to start the installation, it is a very smooth process. To confirm that the installation was a success we can run the following code on our terminal.

To check the npm version available on your PC:

npm -v

For Node:

node -v

Step 3: Downloading the Heroku CLI (If you don't have it installed already)

For us to be able to run Heroku commands remotely from our terminal we will need to install the Heroku CLI.

The Heroku Command Line Interface (CLI) makes it easy to create and manage your Heroku apps directly from the terminal. It's an essential part of using Heroku

For this purpose, we can head to the Heroku Dev Center. We will download the version we need, of course depending on our OS. Along with that, we will also find very helpful instructions on getting started with the Heroku CLI.

The Heroku team was very thoughtful in creating a well-documented step-by-step process of installing and using the Heroku CLI.

Once you have downloaded and installed the CLI we can check if the installation was successful by using the command:

heroku -v

You should get something along the line of :

heroku/7.50.0 win32-x64 node-v12.16.2

Step 4: Logging into your Heroku account through the Heroku CLI.

There are two ways for us to log in through our Heroku CLI.

The first is to run the heroku login command, you’ll be prompted to enter any key to go to your web browser to complete the login. The CLI will then log you in automatically.

You type in this:

heroku login

What follows will look something like this:

heroku: Press any key to open up the browser to login or q to exit
 ›   Warning: If browser does not open, visit
 ›   https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

The second way, if you’d prefer is to stay in the CLI to enter your credentials, you may run heroku login -i:

heroku login -i

Your terminal will look something like this:

heroku: Enter your login credentials
Email: me@example.com
Password: ***************
Two-factor code: ********
Logged in as me@heroku.com

Step 5: Cloning the CORS-Anywhere repo to our PC.

Now that we have our environment set up we can proceed to clone the CORS-Anywhere repo into a selected destination on our PC.

As a developer, it is always nice to appreciate the effort of other developers that provide solutions that make our lives easier by sending some form of support in their direction, so do drop a star for the CORS-Anywhere repo if it helps you solve your problem.

To start, we will open our terminal at the directory of the local storage we want to place the CORS-Anywhere server in locally and run the git command:

git clone https://github.com/Rob--W/cors-anywhere/

After the cloning is complete we will have to install all the packages this project depends on by running the command npm install on your terminal:

npm install

Once all the packages are installed, we can proceed to the next stage.

Step 6: Creating and deploying your server app on Heroku.

While still in the CORS-Anywhere folder, you run the heroku create command to create a new app on the Heroku server:

heroku create

Your terminal will respond with a line as below:

Creating app... done, ⬢ sleepy-meadow-81798
https://sleepy-meadow-81798.herokuapp.com/ | https://git.heroku.com/sleepy-meadow-81798.git

Note: the sleepy-meadow-81798 is a sample project name, yours will be different. It is a random name given to your project.

Now you can push your changes to the new app created on Heroku, just like you would do after making changes to your projects locally and you want to update your repo on Github.

To deploy your app to Heroku, you typically use the git push command to push the code from your local repository’s master or main branch to your Heroku remote, like so:

git push heroku master

And just like that, your proxy server is live on the web, now it's time to navigate to your project page on your Heroku account and launch your app, what you trying to get really is the URL link of your server online. By appending the link to your fetch request you can now avoid the CORS error.

What happens behind the curtains when you use a proxy?

Basically, what happens is that the proxy server acts as an intermediary between your browser and the API server. It receives your request, adds an Access-Control-Allow-Origin: * header to your request, and sends it to the API server, then it gets the response from the API server and sends it back to your browser.

Conclusions

There are other ways to beat the CORS error when interacting with web APIs, like installing the Allow-Control-Allow-Origin plugin on your browser, which is only useful in development but totally useless when it comes to your application working outside of your browser except if you can successfully convince all your users to install the plugin just to use your application.

You can also decide to use a proxy server already deployed by someone else and avoid the hassle of deploying one for yourself but the thing with this option is the fact that depending on the number of requests that the server receives or works with, there tends to be a noticeable lag in the response from the proxy server.

The best option for me so far is creating my own proxy server because I can always have a guarantee that I will get a response and in optimum time.

Feedbacks are golden and yeah let us connect

If you want to check out other articles on and around building stuff on the web, you should check out my blog.

If you have any form of feedbacks please drop it down in the comments, and if you find this article helpful do drop an appreciation.

A taste of syntactic sugar with async/await

Imiebo Godson — Mon, 01 Mar 2021 23:24:28 +0000

What is syntactic sugar?

In computer science, a syntax or feature designed to make a piece of code easier to express or to read within a programming language is referred to as syntactic sugar.

It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.

Basics of Async/Await

The Async function and the await keyword were introduced with the ES8 (2017) release, as an extension to promises. They were introduced to make promise-based asynchronous programing more readable and easier to perceive. Async/await simplifies the syntax used to consume promise-based APIs.

If you yet to encounter promises or you yet to fully understand working with promises, you should check out my article on Making Promises in JavaScript.

Split into two parts; the async keyword that is appended in front of a function to make sure the function only returns a promise, and the await keyword that can only be used within async functions.

Async functions

Appending the async keyword in front of a function means the function will always return a promise.

//A simple function that returns a value
function echo () {
    return 'Hello World';
}

echo();

Adding the async keyword to the above function will make it return a promise instead of returning the value.

//A async function that returns a promise
async function echo () {
    return 'Hello World';
}

echo();

Declaring async functions

Just like we have used function declaration to declare our echo function example above, we can also declare our async functions using;

Async function expression, as below:

let echo = async function () {
    return 'Hello World';
}

echo();

And we can use arrow functions:

let echo = async () => {
    return 'Hello World';
}

echo();

Working with the returned value when the promise is fulfilled

We can append the .then() method to the promise as we have seen with promise chains, we can use the value to do something else, as seen below:

let echo = async () => {
    return 'Hello World';
}

//appending a .then() method to work with the value
echo().then(response => {
    console.log('I am shouting a big ' + response + '!!')
})

The await keyword

Thing to seriously note: The await keyword can only be used within async functions. The only time it works on its own is when used with Javascript modules.

await can be used to call any asynchronous promise-based function that returns a promise. It literally pauses the async function block(not the entire code execution) till the promise returns a value.

Basic syntax:

let value = await promise;

A basic use case is as seen below:

async function sampleFunc () {
    let newPromise = new Promise((resolve, reject) => {
        resolve('The block of code is complete.');
    })

    let displayMessage = await newPromise;
    console.log(displayMessage);

}

sampleFunc();

The await can be used in place of the .then() method to handle resolved promises.

//A simple promise to fetch data from the jsonplaceholder
fetch("https://jsonplaceholder.typicode.com/users")
    .then(resp => resp.json())
    .then(result => {
        console.log(result)
    })

Let us try rewriting the above example with async/await:

//Using the async/await syntax
async function getData () {
    let fetchedData = await fetch("https://jsonplaceholder.typicode.com/users")
    let parsedData = await fetchedData.json()
    console.log(parsedData)
}

We can see that it makes our code clearer and easy to read.

Using `await` with the `setTimeout` API

async function newFunc () {
    let samplePromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('I have been resolved')
        }, 5000)
    });

    let getResolved = await samplePromise;
    console.log(getResolved);
}

newFunc();

Using Async/Await with promise features that handle iterables

Given that async/await built on top promises, they are compatible with all promise features including the likes of Promise.all, Promise.allSettled, Promise.any and Promise.race.

const promise1 = new Promise(resolve => {
    setTimeout(() => resolve('success-1'), 2000)
})

const promise2 = new Promise(resolve => {
    setTimeout(() => resolve('success-2'), 7000)
})

const promise3 = new Promise(resolve => {
    setTimeout(() => resolve('success-3'), 9000)
})

const data = await Promise.all([ promise1, promise2, promise3 ]);
console.log(data)

Using async/await to fetch a set data from an API:

const urls = [
  "https://jsonplaceholder.typicode.com/users",
  "https://jsonplaceholder.typicode.com/posts",
  "https://jsonplaceholder.typicode.com/albums",
];

async function grabData () {
        const [ users, posts, albums ] = await Promise.all(
            urls.map(async function (url) {
                const fetchedData = await fetch(url);
                return fetchedData.json();
            }),
            );
        console.log('Users', users),
        console.log('Posts', posts),
        console.log('Albums', albums)
}

Error handling

When handling errors in async/await there are different paths to go.

One of the more common ways of handling errors with async/await is using the try...catch structure.

Let us try including a try and a catch block to our grabData example above.

// We are grabbing a set of data from the jsonplaceholder and logging it in our browser console
const urls = [
  "https://jsonplaceholder.typicode.com/users",
  "https://jsonplaceholder.typicode.com/posts",
  "https://jsonplaceholder.typicode.com/albums",
];

async function grabData () {
    try {
        const { users, posts, albums } = await Promise.all(
            urls.map(async function (url) {
                const fetchData = await fetch(url);
                return fetchData.json();
            }),
            );
        console.log('Users', users),
        console.log('Posts', posts),
        console.log('Albums', albums)
    } catch (err) {
        console.error(err)
    }
}

Since async/await was create upon promises, you can also follow the hybrid path by chaining the .catch() method instead of the try...catch structure.

const urls = [
  "https://jsonplaceholder.typicode.com/users",
  "https://jsonplaceholder.typicode.com/posts",
  "https://jsonplaceholder.typicode.com/albums",
];

async function grabData () {
        const { users, posts, albums } = await Promise.all(
            urls.map(async function (url) {
                const fetchData = await fetch(url);
                return fetchData.json();
            }),
            );
        console.log('users', users),
        console.log('posts', posts),
        console.log('albums', albums)
}

grabData()
    .catch(err => console.log(err))

Conclusions

My conclusions on using async/await are as follows:

Using async/await makes our asynchronous promise-based API consumption a lot more readable and expressable.
A downside to using async/await is that it makes our code behave synchronously. await literally pauses any code that comes after it till the previous block is done. This can make your program run slower when chaining a set of await blocks.
Using async/await is more a matter of what is comfortable for you and your team.

And that brings us to the end of this article, if you want to check out other articles that I put out you can check out my blog.

If you have any form of feedbacks please drop it down in the comments, and if you find this article helpful do drop an appreciation.

Making Promises In JavaScript

Imiebo Godson — Fri, 12 Feb 2021 15:58:33 +0000

Thanks to the asynchronous part of JavaScript, we have a couple of features that allow us to run non-blocking chunks of code, which means other parts of our code get executed without delay. One such feature and the concern of this article is the promise object, Introduced in ES6 (ES2015), it sure has made asynchronous programming in JavaScript a lot neater to look at and easy to understand.

A promise is an object that represents the eventual success or failure of an asynchronous operation. Callbacks are attached to the returned object to handle the eventual result.

Why Promises?

Before promise got introduced, we used to pass callbacks in functions, which was helpful, but with it came the Callback Hell (heavily nested callback code that is difficult to read). Once you start doing several asynchronous operations in a row, passing callbacks in functions usually led to a Pyramid of doom. With the promise object, working with asynchronous tasks has gotten a lot more efficient and readable.

Creating a Promise

The Promise() constructor is used to create a new promise object but it is primarily used to wrap old APIs that don't already support promises (i.e setTimeout()) since they still expect success and failed callbacks to be passed the old fashioned way.

'use strict';

const myFirstPromise = new Promise ((resolve, reject) => {
    /* resolve(...) in the case of a success */

    /* reject(...) in the case of a failure */
});

State of a Promise

A promise can be of three (3) states:

Pending: This is the initial state immediately after instantiation. The result will be undefined.
Fulfilled: Indicates the promise is resolved (success case). In this case, the result will be a value.
Rejected: This is a failed-to-resolve case. The result will be an error object.

Note: When there's an error handler ( in the .catch() block or an onRejected callback in a .then() block) attached to your promise, the state of the promise in the case of an error will be fulfilled not rejected because the error is passed as a value to the error handler.

Promise methods

We have two (2) categories of methods that can be used along with a promise; the instance methods and the static methods.

Instance methods

Promise.then()

This appends two (2) callbacks to a promise, one for the case of success and another for the case of a failure. Both callbacks are optional which means your .then() block can hold either of the two if not both depending on the purpose of your .then() block.

myFirstPromise.then(
          (value) => { /* code for the case of success */ },
          (error) => { /* code for the case of failure */ }
);

Promise.catch()

It carries an error handler callback that is called in the case of a failure. It returns a new promise resolving to the value of the callback if it is called or its original value when the promise is fulfilled. The .catch() block is ignored when the promise it is appended to passes a success value as a result.

myFirstPromise
        .then((value) => console.log(value))
        .catch((error) => console.error("Oops Something went wrong"));

Promise.finally()

It returns a new promise that is resolved when the original promise is resolved. It carries a handler that is called when the promise is settled, whether fulfilled or rejected.

myFirstPromise
        .then((value) => console.log(value))
        .catch((error) => console.log("Oops Something went wrong"))
        .finally((info) => console.log("All done"));

Static methods

Promise.resolve(value)

This method returns a promise object with a given value. If the value is a promise, the promise is returned; if the value is a thenable (has a .then() method), the promise is going to resolve according to the value of the .then() method, otherwise, the returned promise will be fulfilled with the value.

/* Promise.resolve() with a hardcoded string value */
const myFirstPromise = Promise.resolve("success");

/* Using the .then() method to return a new promise based on the initial resolved value */
myFirstPromise
        .then((value) => console.log(value + "!!!"));

/* Expected output: success!!! */

Promise.reject(reason)

This method returns a new promise object that is rejected with a given reason.

/* Promise.reject() with a hardcoded string value */
const myFirstPromise = Promise.reject("failed")

/* Using the .catch() method to append an error handler */
myFirstPromise
        .catch((errorMessage) => console.error(errorMessage));

/* Expected output: failed */

Promise.all(iterable)

This method takes in an iterable (usually an array) and returns a new promise. The promise is resolved when all listed promises are settled, and the aggregating array of their resulting values (in the same order as listed in the iterable of all the promises) becomes its result.

In the case of failure in any of the promises in the iterable, all other promises are ignored. This is most useful in cases where we need an "all success" to move to the next phase of the code.

/* syntax */
Promise.all([promise, promise, promise,...])
        .then(/* onFulfilled callback */, /* onRejected callback */)

/* Example */
const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("success-1"), 2000)
})

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("success-2"), 5000)
})

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("success-3"), 3000)
})

Promise.all([promise1, promise2, promise3])
        .then(values => console.log(values))
        .catch(() => console.error("something went wrong"))

/* Expected outcome: ["success-1", "success-2", "success-3"] */

Promise.allSettled(iterable)

This is a recent addition to JavaScript at the time of writing this article, not all browsers have support for it. You can check caniuse to find out the browsers with support for it.

It waits till all promises are settled regardless of their results (resolved or rejected). It returns a promise with an array of objects that each describe the outcome of each promise.

/* Using the listed promises from the example for Promise.all() */
Promise.allSettled([promise1, promise2, promise3])
        .then(values => console.log(values))

/* Expected outcome: 
 {
    {status: "fulfilled", value: "success-1"},
    {status: "fulfilled", value: "success-2"},
    {status: "fulfilled", value: "success-3"}
}
*/

Promise.any(iterable)

It takes an iterable of Promise objects and, as soon as one of the promises in the iterable is fulfilled, it returns a single new promise that resolves with the value from that promise.

It returns only the first resolved promise, and the rest of the promises are ignored.

In a case where all promises in the iterable are rejected then the returned promise is rejected with the AggregateError – a special error object that stores all promise errors in its errors property.

/* Using the listed promises from the example for Promise.all() */
Promise.any([promise1, promise2, promise3])
        .then(values => console.log(values))

/* Expected outcome: success-1 */

Promise.race(iterable)

Similar to the Promise.any() method but unlike the Promise.any(), it waits for the first promise in the iterable that gets settled whether resolved or rejected.

Words to take note: Settled is either resolved or rejected. Resolved is successful, Rejected is failed.

When the returned promise gets resolved it will be with the value of the first promise in the iterable to be resolved and when the returned promise is rejected it will be rejected with the reason from the first promise that was rejected in the iterable.

/* Using the listed promises from the example for Promise.all() */
Promise.race([promise1, promise2, promise3])
        .then(values => console.log(values))

/* Expected outcome: success-1 */

/* Even though all got settled(resolved or rejected), promise1 got settled first */

Chaining

One of the common needs when running asynchronous operations is usually the need to run two or more operations back to back, where the result of each operation is dependent on the outcome of the previous one. Before the introduction of promises doing this often led to a Pyramid of doom. With promises, all we need to do is create a promise chain.

/* A typical pyramid of doom, resulting from passing callbacks in functions*/

doSomething((result) => {
    doSomethingElse(result, (newResult) => {
        doThirdThing(newResult, (finalResult) => {
            console.log('Got the final result: ' + finalResult);
        }, failureCallback);
    }, failureCallback);
}, failureCallback);

/* Attaching our callbacks to returned promises instead*/
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => {
            console.log('Got the final result: ' + finalResult);
    })
    .catch(failureCallback);

Note: Always return results, otherwise callbacks won't catch the result of a previous promise, with arrow functions () => x is short for () => { return x; }.

Error handling in Promises

Error handling in promises can be done in either of two possible ways.

By appending an error handler to the promise chain with a .then() method.

/*Using earlier sample code as an example */
myFirstPromise
        .then(
            /* success case handler callback */,
            /* error handler callback */
        );

/* As earlier stated, `.then()` method can take both the unfulfilled and onRejected callbacks  or either of both depending on how you choose to structure your code */

/*use case scenario*/
myFirstPromise
        .then(
            (value) => console.log(value),/* success case handler callback */
            (error) => console.error(error)/* error handler callback */
        );

/* In the use case scenario above I used the `console.error()` method to display the error value in the console. */

By appending an error handler to the promise chain with a .catch() method

/*Using earlier sample code as an example */
myFirstPromise
        .catch (
            /*error handler callback goes here*/
        );

/*use case scenario*/
myFirstPromise
        .catch (
            (error) => console.error(error) /* error handler callback */
        );

/* In the use case scenario above I used the `console.error()` method to display the error value in the console. */

Handling error in a promise chain is much easier and cleaner appending a .catch() method at the end of the promise chain as shown below.

const myPromise = new Promise(myExecutorFunc)

/* Adding the error handler in `.then()` method */
myPromise
    .then(handleFulfilledA,handleRejectedA)
    .then(handleFulfilledB,handleRejectedB)
    .then(handleFulfilledC,handleRejectedC);

/* Using a single `.then()` method to handle any errors*/
myPromise
    .then(handleFulfilledA)
    .then(handleFulfilledB)
    .then(handleFulfilledC)
    .catch(handleRejectedAny);

Note: While it can be useful to continue the chaining after the .catch() block, any error that occurs after the .catch() block won't be visible to it.

Conclusions

Performing asynchronous operations in JavaScript got a lot better with the use of promises and also paved the way for the almighty async-await, so it is safe to say we can forget about the days of the popular callback pyramid of doom that were painful to see and read.

While we have mostly used promises to log values in the console in this article, they are usually used to get files or do XMLHttpRequest to and from the server, among others.

You can choose to learn more about promises with the MDN Web Docs and w3schools.

With that, I thank you for making it to the end of this article and I hope this helped you in a way or two because that is and will always be my number one goal in putting these up, and sharing with you guys.

DEV Community: Imiebo Godson

Fixing the CORS error by hosting your own proxy on Heroku

Creating your own Heroku proxy server app

Step 1: Setting up your Heroku Account (If you don't already have one)

Step 2: Downloading Node and the Node Package Manager (NPM) (If you don't have it installed already)

Step 3: Downloading the Heroku CLI (If you don't have it installed already)

Step 4: Logging into your Heroku account through the Heroku CLI.

Step 5: Cloning the CORS-Anywhere repo to our PC.

Step 6: Creating and deploying your server app on Heroku.

What happens behind the curtains when you use a proxy?

Conclusions

Feedbacks are golden and yeah let us connect

A taste of syntactic sugar with async/await

What is syntactic sugar?

Basics of Async/Await

Async functions

Declaring async functions

Working with the returned value when the promise is fulfilled

The await keyword

Using await with the setTimeout API

Using Async/Await with promise features that handle iterables

Error handling

Conclusions

Making Promises In JavaScript

Why Promises?

Creating a Promise

State of a Promise

Promise methods

Instance methods

Promise.then()

Promise.catch()

Promise.finally()

Static methods

Promise.resolve(value)

Promise.reject(reason)

Promise.all(iterable)

Promise.allSettled(iterable)

Promise.any(iterable)

Promise.race(iterable)

Chaining

Error handling in Promises

Conclusions

Using `await` with the `setTimeout` API