Fetch not returning anything (HTML, CSS, JS)

Code Help
1

I have this code for a website im trying to make and it is supposed to interact with another replit website ive made that returns json for my js script to get. The problem is that when it tries to interact with the other replit website, nothing happens. It’s like the script completely stops when it tries to access the other website. What do I do?


Repl link:

async function randomTwitterLike() {
  console.log("button press detected");
  await fetch("https://the-krisnard-api.sirloinsteak1.repl.co/api/random_twit_like").then(response => {
    return response.json();
  }).then(data => {
    console.log(data);
    var html = `<iframe src="${url}" name="testing image" width="800" height="1600"></iframe>`;
    document.getElementById('picturearea').innerHTML = html;
    document.getElementById('output').innerHTML = 'enjoy'
    console.log(document.getElementById('picturearea').innerHTML);
  })
}
2

I’m not an expert so if this is totally wrong… my apologies.

I dont generally use fetch, I use Jquery’s ajax method buuuuut. I think you have an issue in your use of both async and promise chaining.

I believe you can drop the asyc/await and you might be ok.

1 Like
3

You don’t need the async or await, but it still doesn’t work because of CORS.

fetch("https://the-krisnard-api.sirloinsteak1.repl.co/api/random_twit_like").then((res) => res.json()).then(console.log);

Access to fetch at 'https://the-krisnard-api.sirloinsteak1.repl.co/api/random_twit_like' from origin 'https://krisnard-twitter-likes-website.sirloinsteak1.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.