0

I've tried many ways to make this work, but can't seem to figure it out. I have a simple build that is supposed to bring up a new affirmation from the API every time you click the button. It also reads out the affirmation. The issue is that I'm getting this error with the CORS policy:

"Access to fetch at 'https://www.affirmations.dev/' 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."

I am adding the HTML and JavaScript below.

if ('speechSynthesis' in window) {
  // Speech Synthesis supported 
 }else{
   // Speech Synthesis Not Supported 
   alert("Sorry, your browser doesn't support text to speech!");
 }

const aff_url = "https://www.affirmations.dev";
async function getAff() {
    const response = await fetch(aff_url);
    const data = await response.json();
    const { affirmation } = data;


    document.getElementById('affirmation').textContent = affirmation;

    function speak() {
        speechSynthesis.speak(new SpeechSynthesisUtterance(affirmation));
      }
      speak();
}

getAff();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Affirmations</title>
    <link rel="stylesheet" href="main.css">
    <script src="main.js"></script>

</head>

<body>
    <div class="content">
        <h1 id="affirmation"></h1>
        <button onclick="getAff()">Affirm me</button>
    </div>
    
    
</body>
</html>

What the heck do I need to do? Thank you.

jFern
  • 9
  • 1

0 Answers0