CORS Error:Response to preflight request doesn't pass access control check when trying to access Azure Search Api

Question

I am using an ajax put request to perform a merge operation to update a field named DocType for a particular document in azure search index. But getting the error: Failed to load resource: the server responded with a status of 404 (Not Found) Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

The ajax request I am performing:

 var jsonMeta = { 
       "value": [
        { 
         "@search.action": "merge", 
         "metadata_storage_path": "*******jkio********", 
          "DocType": "Test_Merge" 
        }
        ]
  };
  var jsonString = JSON.stringify(jsonMeta);
  var url = "https://documentsmartdetect.search.windows.net/indexes/document-smartdetect-index/docs/index?api-version=2017-11-11";
$.ajax({
            url: url,
            method: 'PUT',
            data: JSON.stringify(jsonMeta),
            // This is the important part
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            contentType: 'application/json',
            headers: {
                "api-key": "***************89**",
            },
            success: function (response) {
            },
            error: function (xhr, status) {
                alert('error');
            }
        });

I have also tried using Allowed origin type : all on the azure portal. Need some assistance to fix the CORS issue.

Answer 1

Azure Search does not allow calls from front-end JavaScript, so you cannot do what you want directly. You will have to call Azure Search from a back-end.

This is actually a serious security problem as well since your Search key is now public within the JavaScript that is sent to all visitors of your web app.