CORS policy: Response to preflight request - JavaScript/SharePoint Server

I have an issue connecting to my SharePoint server. This issue occurs whenever I try connecting my code from the frontend to the SharePoint server, I do not have a backend for this. 

 

Basically, I am trying to get the SharePoint API results directly via JavaScript. I am uncertain why this error keeps popping up. Is there something wrong with my IIS configuration? Please do help me on this! Thank you!

This is my IIS configuration in the SharePoint Server:

<httpProtocol>
 <customHeaders>
  <add name="X-Content-Type-Options" value="nosniff" />
  <add name="X-MS-InvokeApp" value="1; RequireReadOnly" />
  <add name="Access-Control-Allow-Origin" value="*" />
 </customHeaders>
</httpProtocol> 

Error Message:

My code is as follows:

function simpleSearchAPICall(searchUrl) {

            $.ajax({
                url: searchUrl,
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                
                complete: function(response){
                    console.log("URL", searchUrl)
                    console.log(response);
                    // Handle the response data here
                },
                error: function(xhr, status, error) {
                    console.error("ERROR:",error);
                    // alert("An error occurred while making the request.");
                }
            });


        simpleSearchAPICall("http://www.test.com/_api/search/query?querytext='test'")
});