AJAX call not working in Edge and IE, it works only in Firefox and Chrome

Question

I tried to call Java REST API through AJAX. It works only on Firefox and Chrome browsers but it doesn't work in Microsoft Edge and IE. It shows error like:

"SCRIPT7002: XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd." and "SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.".

My AJAX call is:

First one:

$(function getTest() {
  var url = 'http://localhost:8080/MyService/user/getListOfGender?_=1487141734780';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function(e) {
    var arraybuffer = JSON.parse(xhr.responseText);
    console.log(arraybuffer.Result);
  };
  xhr.send();
});

Second method:

$(function getGenderId() {
  var sessionId = getSessionId();
  $.ajax({
    url: "http://localhost:8080/MyService/user/getListOfGender?_=1487141734780",
    type: 'GET',
    crossDomain: true,
    dataType: 'json',
    beforeSend: function(xhr) {
      xhr.setRequestHeader('sessionId', sessionId);
      xhr.setRequestHeader('Accept',
        'text/html, application/xhtml+xml, image/jxr, */*');
    },
    success: function(data) {
      var sData = data.Result;
      var genderData = JSON.parse(sData);
      for (var i = 0; i < genderData.length; i++) {
        var genderId = genderData[i].genderId;
        var genderName = genderData[i].gender;
        $("#gender").append(
          '<option id="' + genderId + '">' + genderName +
          '</option>');
      }
    },
    error: function(e) {
      // alert("Error" + e);
      if (e.status == "401") {
        $("#sessionModal").modal();
      }
    },
    cache: false,
    contentType: false,
    processData: false
  });
});

and my rest api service

@Path("/getListOfGender")
@GET
@Produces(MediaType.APPLICATION_JSON)
public String getListOfGender() {
    String response = dataFetchService.getListOfGender();
    return response;
}

and my server cors configuration

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
        <param-name>cors.allowGenericHttpRequests</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowSubdomains</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, HEAD, POST, OPTIONS</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedHeaders</param-name>
        <param-value>origin, accept,Content-Type, X-Requested-With, sessionId</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposedHeaders</param-name>
        <param-value>X-Test-1, X-Test-2</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportsCredentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.maxAge</param-name>
        <param-value>-1</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

I tried to call the server from IE and Edge but it doesn't work. Let my know whether need to change from client or server side, if anything required. Thanks in advance.