0

There's this api, that returns YES, NO or MAYBE, to any question asked, see website: https://yesno.wtf/

I tried implementing it, and soon quickly met an error.

The error messages are:

Access to fetch at 'https://yesno.wtf/assets/yes/2.gif' from origin 'http://127.0.0.1:5500' 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.

GET https://yesno.wtf/assets/yes/2.gif net::ERR_FAILED 404

Uncaught (in promise) TypeError: Failed to fetch at HTMLFormElement.decide (index.html:60:11)

It's JavaScript, within a html file. Thanks. (Noteworthy: I'm new to API's)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .d-flex {
        display: flex;
      }
      .justify-center {
        justify-content: center;
      }
      .flex-col {
        flex-direction: column;
      }
      .align-center {
        align-items: center;
      }
    </style>
  </head>
  <body>
    <form class="d-flex flex-col align-center">
      <label for="task">
        <h1>Welcome to Ask.Net</h1>
      </label>

      <input placeholder="Enter your questions here..." type="text" id="task" />
    </form>

    <section class="img-container">
      <article id="img-article"></article>

      <h1 id="answer-text"></h1>
    </section>

    <script>
      {
        const wtfUrl = "https://yesno.wtf/assets/yes/2.gif";

        const imgArticle = document.getElementById("img-article");

        const ansText = document.getElementById("answer-text");

        document.querySelector("form").addEventListener("submit", decide); 

        function decide(event) {
          event.preventDefault(); //this stops the page from refreshing from a submit event

          //remember to call an api, we always use the 'fetch' command.

          fetch(wtfUrl, {
            method: "GET",
            headers: {
              accept: "application/json",
            },
          }).then(async (response) => {
            const result = await response.json();

            const img = document.createElement("img");

            img.setAttribute("src", result.image);

            imgArticle.appendChild(img);

            ansText.textContent = result.answer;
          });
        }
      }
    </script>
  </body>
</html>
James Z
  • 12,209
  • 10
  • 24
  • 44
Mr Jerry Glass
  • 11
  • 1
  • 3
  • 1
    Does this answer your question? [Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i) – Sherly Febrianti Jun 13 '22 at 07:09

1 Answers1

-1

I guess your missing some header properties:

 fetch(wtfUrl, {
            method: "GET",
            headers: {
              accept: "application/json",
              Content-Type: "application/json",
              Access-Control-Allow-Origin: "*"
            },
Ychop
  • 27
  • 7