DEV Community

Cover image for How to create a proxy server on Heroku
teri
teri

Posted on • Updated on

How to create a proxy server on Heroku

The Cross-Origin Resource Sharing (CORS) Error

Have you encountered this error?

Screen Shot 2020-08-07 at 00.40.44.png

This error occurs when working with APIs in your application code, and these bugs creep up every time you try to call the origin from another URL. The CORS errors stem from a security mechanism that the browser implements called the same-origin policy.

In this article, we will create our proxy CORS server hosting it on Heroku and have access to it any time we need it instead of using the generally hosted public URL used by everyone here on this with this link.

Prerequisites

We will need the following to be installed on our system to begin.

  • Install the Heroku CLI.
    For macOS, you can use homebrew. Visit heroku-cli for installation guides for your respective OS.

  • Install Node. Visit nodejs for installation guides.

  • Basic git version control skills

Step by Step guideline on creating a proxy server

Screen Shot 2020-08-07 at 01.40.29.png

  • cd into the cloned repository and run npm install to install on the dependencies for the project.

  • Log into Heroku from the terminal.

Screen Shot 2020-08-07 at 01.44.16.png

After logging in from the terminal, follow the prompts from the opened browser to your Heroku account.
Screen Shot 2020-08-07 at 01.47.19.png

  • Create an app with the command Heroku create

Screen Shot 2020-08-07 at 01.55.06.png

After the app has been created and before deployment, Heroku will display a generic message with the deployed URL that you can use in place for the universal cors-anywhere URL.

Screen Shot 2020-08-07 at 01.58.42.png

  • The last thing to do now is to push your newly created proxy server to Heroku

Screen Shot 2020-08-07 at 02.13.13.png

Screen Shot 2020-08-07 at 02.14.04.png

Conclusion

The CORS errors can be the bane of the frontend developer. But in this guide, we were able to spin up a proxy server from scratch using a Heroku server and basic git commands.

With these fixes, you'll never have to break a sweat overseeing the red CORS error in your browser, and you can confidently now have an error-free connection as a frontend developer.

Here is a valuable resource related to CORS

Fixing CORS

Top comments (4)

Collapse
 
bhatiashivam profile image
Shivam Bhatia

Thank you so much! You saved me. You have no idea.

Collapse
 
terieyenike profile image
teri

Hello Shivam!

That's great to hear that it worked for you.

Collapse
 
ugurtekbas profile image
Ugur Tekbas

That was exactly what I was looking for. You helped me big time @terieyenike thanks a lot!
Keep sharing.

Collapse
 
terieyenike profile image
teri

I am glad the resource from the article was helpful.