Building CORS anywhere using Vercel

Invoke CORS-anywhere using Vercel server-less functions

A bit about CORS Cross-Origin Resource Sharing, the protocol mechanism is limited to loading resources like scripts, AI models, and HTML pages that are not on your origin page unless the external resource is on a host server that is specifically altered to allow loading its pages/resources from other domains.

CORS settings are disabled by default, therefore most of the site's resources are off-limits to our apps.

The CORS mechanism protected our pages for years and made the internet safe from credential theft and private information leakage, but unfortunately, it limited our websites to share their resources (images are a nice exception).

CORS anywhere is an open-source project which allows our page to load external resources safely preventing credential leakage using the node server fetch method.

The major downside of running the CORS-anywhere proxy is to continuously run a node server on HEROKU or other cloud providers.

HEROKU free plan provides you with node container, which is limited to specific hours a day and comes with warm-up time which makes it a poor choice. Other solutions can be costly for unfunded dev groups.

Recently we were considering to move from Netlify to Vercel for our single page vanilla apps. We came about a cool and simple Vercel feature: server-less function which come free on hobby plan as a part of the hosting the static page.(Netlify has it’s own solution: Netlify functions, but we will focus on Vercel in this article)

Vercel server-less function runs simple node apps, which come in handy for CORS-anywhere implementation.

Here are the steps to create a single-page app with a server-less built-in function that implements CORS-anywhere functionality.

1. Create a GitHub account (if you don’t already have one)
2. Create a Github repo: you can fork our repo at https://github.com/KostaMalsev/servelessCors.git
3. Create a Vercel account with a GitHub account
4. Connect your GitHub account and import your repo to Vercel

1. Run your app using Vercel domain to see the resource, you can find the domain here:

https://serveless-cors.vercel.app/api/cors?url=https://yourexternalresource

Here is a live demo on Vercel, it uses a relative path to access the serverless function and loads an MDN site html.

https://serveless-cors.vercel.app

That’s it.

A bit on how the code is structured:

1. index.html is the place to put your cool page.
2. “API” folder: contains cors.js file with our cors-anywhere server-less function. Note: the file name is also the name of the route to invoke the function.
3. The cors.js file itself is plain-simple: each app request is sent from “node server” which is our server-less function provided by mighty Vercel.