How to create API calls to external sources?

Ask for Help
11

Ok, I understand better. Here there are 2 points to keep in mind:

1)- This kind of syntax isn’t supported by JS plugin… I have lived this pain before :roll_eyes:

fetch("https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com", {
      "method": "POST",
      "headers": {
            "Content-Type": "application/x-www-form-urlencoded",
            "Authorization": "Bearer abc123abc123abc123abc123abc123abc123abc123abc123"
      }
})
.then((res) => res.text())
.then(console.log.bind(console))
.catch(console.error.bind(console));

The right syntax must be something like:

var data= await fetch('https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer abc123abc123abc123abc123abc123abc123abc123abc123'
    },
});

const json = await data.text();
return json

The reason? … Glide’s JS plugin doesn’t support the Promise.prototype.then() method nor console.log() function… I mean, these statements:

.then((res) => res.text())
.then(console.log.bind(console))
.catch(console.error.bind(console));

2)- If we run my JS code version in Glide, we receive an error message caused by a CORS policy so, we need to use a CORS proxy instead and change a bit your URL.

Your new URL is now:

https://corsanywhere.herokuapp.com/https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com

where https://corsanywhere.herokuapp.com is our CORS proxy and the final JS code is this:

var data= await fetch('https://corsanywhere.herokuapp.com/https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer abc123abc123abc123abc123abc123abc123abc123abc123'
    },
});

const json = await data.text();
return json

image
image518×572 35.4 KB

Finally, we got the right results and enjoy the fireworks! :sparkler: :sparkler:

image
image400×590 50.8 KB

David time ago warned about the problem with Bearer authorization if the Fetch JSON plugin is used but now, I can confirm with your case that using the JavaScript plugin we can get good results working with Bearer authorization. It’s a great news @Tim_Gestels

BTW @globalint … I didn’t know your cool tool to create reports, it looks very useful! :muscle:

Saludos y feliz día!

1 Like