JavaScript column Function Error Type Error: Failed to Fetch

Ask for Help
1

Hello Gliders,

In my app I need just a single POST request and created a js fetch column.
While my request works well in several other test tools - for some reason my column is empty and when I double click on it I am getting the above described error.

When I inspect network trafic in the browser I see : ERR_BLOCKED_BY_CLIENT.

Any idea?

Here is my js fetch column:

var data = {
    "PRIORITETI": [
   { "id" : "10" , "name" : "Obezbedi da svaki igrač igra minimalno jedan meč", "priority" : "1" }, { "id" : "20" , "name" : "Maksimizuj broj mečeva", "priority" : "2" }, { "id" : "30" , "name" : "Prioritizuj jutarnje termine", "priority" : "3" }, { "id" : "40" , "name" : "Prioritizuj igrače koji imaju najviše preostalih mečeva", "priority" : "4" }, { "id" : "50" , "name" : "Prioritizuj igrače koji su prijavili najviše termina", "priority" : "5" }
] 
,
    "TERMINI_KLUBA": [
   { "dan" : "1" , "sat" : "8", "teren" : "vIMfQHxSaJFU8ogpAr0v" }, { "dan" : "1" , "sat" : "8", "teren" : "BG4G07LVpEvs5c9Bc3SI" }, { "dan" : "1" , "sat" : "8", "teren" : "Zk6uhkn9YXzh123c7Pra" }, { "dan" : "2" , "sat" : "8", "teren" : "Zk6uhkn9YXzh123c7Pra" }, { "dan" : "2" , "sat" : "8", "teren" : "vIMfQHxSaJFU8ogpAr0v" }, { "dan" : "3" , "sat" : "8", "teren" : "Zk6uhkn9YXzh123c7Pra" }, { "dan" : "3" , "sat" : "8", "teren" : "vIMfQHxSaJFU8ogpAr0v" }
] 
,
    "IGRACI": [
   { 
   "PLAYER_ID" : "dnDEeNNPQNyEhCGpaAyBhQ",
   "PLAYER_NAME" : "Goran Vukojičić ",
    "ZELI_IGRATI_MECEVA" : "2",
   "PREOSTALO_MECEVA" : "7",
   "TERMINI_IGRACA": [
   { "dan" : "2" , "sat" : "8" }
  ],
 "POTENCIJALNI_PROTIVNICI" :[
  "tHGxFNjDQl2YkPd0ga2ZYQ","Od9fmlcnSvWKXjhr9WrJpQ"
]
}, { 
   "PLAYER_ID" : "LDY-2YUXQj2feUUgE57xQw",
   "PLAYER_NAME" : "Nenad Roknic",
    "ZELI_IGRATI_MECEVA" : "1",
   "PREOSTALO_MECEVA" : "9",
   "TERMINI_IGRACA": [
   { "dan" : "1" , "sat" : "8" }
  ],
 "POTENCIJALNI_PROTIVNICI" :[
  "tHGxFNjDQl2YkPd0ga2ZYQ"
]
}, { 
   "PLAYER_ID" : "Od9fmlcnSvWKXjhr9WrJpQ",
   "PLAYER_NAME" : "Nikola Obradovic",
    "ZELI_IGRATI_MECEVA" : "2",
   "PREOSTALO_MECEVA" : "9",
   "TERMINI_IGRACA": [
   { "dan" : "2" , "sat" : "8" }, { "dan" : "3" , "sat" : "8" }
  ],
 "POTENCIJALNI_PROTIVNICI" :[
  "tHGxFNjDQl2YkPd0ga2ZYQ","dnDEeNNPQNyEhCGpaAyBhQ"
]
}, { 
   "PLAYER_ID" : "tHGxFNjDQl2YkPd0ga2ZYQ",
   "PLAYER_NAME" : "Vladislav Groshkov",
    "ZELI_IGRATI_MECEVA" : "2",
   "PREOSTALO_MECEVA" : "7",
   "TERMINI_IGRACA": [
   { "dan" : "1" , "sat" : "8" }, { "dan" : "2" , "sat" : "8" }, { "dan" : "3" , "sat" : "8" }
  ],
 "POTENCIJALNI_PROTIVNICI" :[
  "LDY-2YUXQj2feUUgE57xQw","Od9fmlcnSvWKXjhr9WrJpQ","dnDEeNNPQNyEhCGpaAyBhQ"
]
}
] 

};

var response = await fetch('https://liga.bogdandjukic.com', {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
});

const result= await response.text();      
return result;
2

This might be related to CORS. If it’s indeed the case, in the past I use services like this to bypass it.

https://corsproxy.github.io/

Basically prepend a link to your main URL and try to call it again, but these proxies have their own limits and can’t be relied on for production use.

Do you have access to the Call API action?

3

unfortunately no access to Call API. I am on maker app, developing a tennis league app that is not commercial, rather a hobby for myself and friends…

4

Perhaps you can host this script on GitHub Pages, which is free and then invoke it using the column type Computed -> Experimental -> Code -> Experimental Code. Agreed, it is a bit of work to host the code on Gitub Page, but worth the shot.

5

hi thanks. I wasn’t aware of expertimental code columns.

If I understood correctly, this will eliminate CORS issue as entire computation is done on the client, not on the server.

6

Hmm, I am not sure honestly speaking. Now that I think about this more, even when the function is hosted on a GitHub page, all it does most likely is to serve the javascript to the frontend UI and code will still run on the browser/WebClient. Since I already have Github pages setup, let me give this shot to save you from the trouble for setting up one.

7

That is correct.

2 Likes
8

Is there any hello world example that works with Github pages so I can follow the example to build the column?

9

Here are the related links:

However, even when hosted, the JavaScript code will execute on the client device, not the server, leading to the same CORS issue. The best way to handle this is for the server (e.g., https://liga.bogdandjukic.com) to return a JSONP response. For more information, see Understanding JSON, JSONP, CORS, and bypassing CORS with JSONP.

I also missed an important point earlier. Any hosted code must be idempotent, meaning it should always return the same result for the same inputs. Your code, which calls another service and likely returns different data each time, may not meet this criterion. While Glide isn’t strictly enforcing this yet, it’s important to consider.

Ensure that your approach doesn’t circumvent Glide’s pricing structure by performing actions not supported by your plan.

10

thanks for the help, but actually I am even more confused.

How come that experimental code can cause CORS when there are no any http requests involved? Glide experimental column calls github pages, retrieves the code, executes it locally, it is pure algorithm computation, not http calls.

yeah, it is idempotent, as it my app generates input and for the same input, it should return the same result.

As far as I know, having one experimental code in the whole app doesn’t affect Glide pricing structure.

11

Will the code returned from GitHub page include logic to make a HTTP request to fetch the data from your server? If so that request will trigger a CORS exception on the client. But if you’re going to have a server side code that makes the HTTP request on the server and then return only the data, then there shouldn’t be any problem.

By the way, I am just an enthusiastic user like you. I don’t work for Glide. My point about Glide plan is just an fyi.

12

The code returned from github will not make any http request, just local computation.

The same here - enthusiasist :joy:

1 Like
13

The solution means you’ll still do a fetch, but instead of fetching from https://liga.bogdandjukic.com, you fetch from https://crossorigin.me/https://liga.bogdandjukic.com.

That’s just an example though. I just realised crossorigin doesn’t support POST requests.

This seems to be another option, where you have a playground.

1 Like