No 'Access-Control-Allow-Origin' header is present on the requested resource JavaScript

Was browsing community/documentation, but could not find relevant info. I've seen some similar questions and I apologize in advance for posting as I did not find a fix there.

I have an html page in Oracle with some JavaScript in it. From this html I need to send https request (GET) to external system and get some data back. I am getting an error:

Access to fetch at 'https://myExternalSite.com' from origin 'https://myOriginSite.com' 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

I understand that I am trying to perform http request to another domain and it is restricted due to security reasons. I did find an information about installing browser extension to allow access using CORS, but this is not an option, I need to allow CORS thought JavaScript script. Tried already different options and combinations, with no success unfortunately.

Any help will be appreciated.

Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    <meta http-equiv="x-ua-compatible" content="IE=11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
  </head>

  <body>
    <div id="inputWrapper">
      <input type="submit" id="submitBtn" value="Click me" />
    </div>
    <script type="text/javascript">
      var myAppId = "My Application"; 
      var extensibilityApiVersion = "1.0"; 

      document.getElementById("submitBtn").addEventListener("click", function () {
        (async () => {
          try {
              let Headers = new Headers();
              Headers.append("Access-Control-Allow-Origin", "*");
              Headers.append("Access-Control-Allow-Headers", "Content-Type, Authorisation");
              Headers.append("Access-Control-Allow-Methods", "GET");
              Headers.append("Access-Control-Allow-Credentials", true);
              const requestOptions = {
                method: "GET",
                headers: Headers,
              };
              const res = await fetch(`https://myExternalSite.com`, requestOptions);
              const reportData = await res.json();
              console.log(reportData);
            });
          } catch (err) {
            console.log(err);
          }
        })();
      });
    </script>
  </body>
</html>

No 'Access-Control-Allow-Origin' header is present on the requested resource JavaScript

0 Answers