I'm currently working on a JavaScript project and encountering a CORS error when making a cross-origin request from my application. Here are the details:
I am using a https://haveibeenpwned.com/API/v3 Documentation Here is the code . The api request should me made using sending key on the header .
<!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>Have I Been Pwned</title>
</head>
<body>
    <h1>Hello</h1>
    <script>
        const apiKey = "333a2*********b2ea641*********";
const url = "https://haveibeenpwned.com/api/v3/breachedaccount/example@test.com"; 
const headers = {
  "hibp-api-key": apiKey,
};
const options = {
  method: "GET",
  headers: headers
};
fetch(url, options)
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Request failed with status: " + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
    </script>
    
</body>
</html>
And I have check this API key and all using Insomnia i am getting response from the header . But in browser I am keep getting this error .
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
 
    