JS code error for fetch()

[C3aca]

I can’t digure out this error

https://replit.com/@C3aca/BlockCoin

Here is my code:

const url = "https://api.blockcoin.repl.co/balance/herasium"
async function getBalance() {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data.balance);
      }
      getBalance();

This is the error:
TypeError: Failed to fetchhttps
It works in node.js, but not in normal js for some reason

[OmegaOrbitals]

Here’s the website for anyone who wants it: blockcoin.c3aca.repl.co

Fixed code:

const url = "https://api.blockcoin.repl.co/balance/herasium"
async function getBalance() {
    fetch(url)
    .then((res) => {
      return res.json()
    })
    .then((json) => {
      console.log(data.balance);
    })
}
getBalance();

[C3aca]

Apparently I’m missing brackets and a curly bracket but when I add them, I get the “failed to fetch” error again

[OmegaOrbitals]

Whoops, sorry for the syntax error.

For the “Failed to fetch”, I’m not sure. The request is fine, so there’s probably an issue with the backend.

[boston2029]

Notice the other error:

Access to fetch at 'https://api.blockcoin.repl.co/ping' from origin 'https://blockcoin.c3aca.repl.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

In simple terms, your website is trying to access a different website, which is disabled for security reasons.

A quick fix would be to use UNCORS, which is a project someone made that can pretty much bypass this. To use it, simply prepend https://uncors.vercel.app/?url= to the beginning of your URL string.

Your URL declaration would now look like this:

const url = "https://uncors.vercel.app/?url=https://api.blockcoin.repl.co/balance/herasium"

This should work and give you the response without any fetch errors.

And by the way, in this code:

async function getBalance() {
    fetch(url)
    .then((res) => {
      return res.json()
    })
    .then((json) => {
      console.log(data.balance);
    })
}
getBalance();

Change

console.log(data.balance)

to:

console.log(json.balance)

And you should be able to access all of the properties fine. (I tested it too.)

[C3aca]

Thank you so much! I’ve been stuck on the problem for so long, and even got blocked on stack overflow

[boston2029]

You can mark the reply as Solution if you have no further questions.

[C3aca]

Just wondering, how do i get the data out of
the function getBalance? When i use return, i get an object promise.

[boston2029]

If you are getting a promise, then you need to call .then on the promise and it passes the thing through. Example:

fetch(url).then(data=>data.json()).then(json=>{
  console.log(json.balance)
})

And if you put that in a function, it doesn’t need to be an async function, it can just be a regular one