Skip to main content
Solved

Custom Apps and CORS

I
Forum|alt.badge.img+4

I have slowly been developing a custom app that interfaces with several external APIs that supply additional data to airtable entries. I started out with the utility as an automation script - here I was able to use remoteFetchAsync() to avoid any CORS issues with my fetch calls. However, since moving to the custom app and React, I am having to go through the proxy at https://cors-anywhere.herokuapp.com/ to run my API calls (and avoid the CORS preflight errors).

The issue is the proxy is only for development - I would like to either duplicate what it does myself or find a similar service that does the same thing. I am relatively new to JS and web development, so I am looking for a well documented solution that would be easy to implement in a few hours. Does anyone have any hints on where to look?

Since Airtable has the server fetch functionality built in for scripts, is it also possible to use it in custom apps?

Best answer by Jono_Prest

Cors-anywhere is open source. You can deploy it to your own heroku node js server very quickly. All you need to do is clone or download cors-anywhere from GitHub, install the Heroku CLI, create a new heroku app and deploy cors-anywhere to it. Here’s an example of an article that walks you through it: Setup your own CORS proxy / Sylvain Lesage / Observable

Regarding your question on fetch - yes custom apps support fetch.

View original
L
1 person likes this
  • L
    Lisa_Ross
Did this topic help you find an answer to your question?

3 replies

J
  • Jono_Prest
  • Inspiring
  • 26 replies
  • Answer
  • October 7, 2021

Cors-anywhere is open source. You can deploy it to your own heroku node js server very quickly. All you need to do is clone or download cors-anywhere from GitHub, install the Heroku CLI, create a new heroku app and deploy cors-anywhere to it. Here’s an example of an article that walks you through it: Setup your own CORS proxy / Sylvain Lesage / Observable

Regarding your question on fetch - yes custom apps support fetch.

I
1 person likes this
  • I
    Ivan_Iakimenko
I
Forum|alt.badge.img+4
  • Ivan_Iakimenko
  • Author
  • New Participant
  • 2 replies
  • October 7, 2021
Jono_Prest wrote:

Cors-anywhere is open source. You can deploy it to your own heroku node js server very quickly. All you need to do is clone or download cors-anywhere from GitHub, install the Heroku CLI, create a new heroku app and deploy cors-anywhere to it. Here’s an example of an article that walks you through it: Setup your own CORS proxy / Sylvain Lesage / Observable

Regarding your question on fetch - yes custom apps support fetch.


Thank you for the quick response! In setting up the CORS proxy, I have to set a whitelist:

# set the list of allowed origins: only your user
heroku config:set -a severo-observablehq CORSANYWHERE_WHITELIST=

Where can I check what url my requests will be coming from when the custom app is running in Airtable?

J
  • Jono_Prest
  • Inspiring
  • 26 replies
  • October 7, 2021
Ivan_Iakimenko wrote:

Thank you for the quick response! In setting up the CORS proxy, I have to set a whitelist:

# set the list of allowed origins: only your user
heroku config:set -a severo-observablehq CORSANYWHERE_WHITELIST=

Where can I check what url my requests will be coming from when the custom app is running in Airtable?


There is no real need to set a whitelist. This is just to stop any other domains from interacting with your proxy. You may actually want to use it across multiple projects.

But essentially the domain would just be https://airtable.com (and you can include a path to your base as well if you like.)

You can always find the url of your requests by opening up your browser inspector, selecting the network tab and then as you make your request you will see all the info about the request being made from your browser.

I
1 person likes this
  • I
    Ivan_Iakimenko

Reply


Most helpful members this week

Terms & Conditions