When clicking the button on my front end (relevant portion shown below)

async function getSample() {
  const res = await fetch('/lookup/url');
  const data = await res.text();
  console.log(data);
}
document.getElementById('button').addEventListener('click', getSample);

async function getSample() {
  fetch('http://localhost:3000/lookup/url')
    .then(response => response.text())
    .then(data => console.log(data));
}

I am getting this error in the terminal of my node server:

TypeError [ERR_INVALID_URL]: Invalid URL: url

and this in my console:

Fetch failed loading: GET "http://localhost:3000/lookup/url"

Can anyone provide some advice as to what I may be doing wrong and how I could fix?

Not that this matters, but backend is express

Adjustment Re: Comments

async function getSample() {
    const res = await fetch('/lookup/url');
    const data = await res.text();
      console.log(data);
    
      document.getElementById('button').addEventListener
       ('click', getSample);
    
        fetch('http://localhost:3000/lookup/url')
        .then(response => response.text())
        .then(data => console.log(data));
    }

When clicking the button on my front end (relevant portion shown below)

async function getSample() {
  const res = await fetch('/lookup/url');
  const data = await res.text();
  console.log(data);
}
document.getElementById('button').addEventListener('click', getSample);

async function getSample() {
  fetch('http://localhost:3000/lookup/url')
    .then(response => response.text())
    .then(data => console.log(data));
}

I am getting this error in the terminal of my node server:

TypeError [ERR_INVALID_URL]: Invalid URL: url

and this in my console:

Fetch failed loading: GET "http://localhost:3000/lookup/url"

Can anyone provide some advice as to what I may be doing wrong and how I could fix?

Not that this matters, but backend is express

Adjustment Re: Comments

async function getSample() {
    const res = await fetch('/lookup/url');
    const data = await res.text();
      console.log(data);
    
      document.getElementById('button').addEventListener
       ('click', getSample);
    
        fetch('http://localhost:3000/lookup/url')
        .then(response => response.text())
        .then(data => console.log(data));
    }

• javascript

• I think it might be a CORS issue. The frontend isn't in localhost:3000, right? – sebasaenz Commented Jan 7, 2021 at 0:30
• @sebasaenz the front end is showing when I access localhost:3000. – Max.California Commented Jan 7, 2021 at 0:44
• Why do you have two definitions of getSample()? – Barmar Commented Jan 7, 2021 at 0:46
• @Barmar Don't I need to define it, and then use it? – Max.California Commented Jan 7, 2021 at 0:47
• Are you declaring the same function twice? You don't need to do it, just once is enough – luckongas Commented Jan 7, 2021 at 0:53

1 Answer 1

Get rid of the second definition of getSample(). You only need one definition of the function, and it's better to use a relative URL to access resources on the same server as the front end.

async function getSample() {
  const res = await fetch('/lookup/url');
  const data = await res.text();
  console.log(data);
}
document.getElementById('button').addEventListener('click', getSample);