Couldn't access Wcf service hosted in a server through ajax call, but can access the same Wcf service hosted in local machine

<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
  <appsettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
    <add key="ConnectionString" value="Data Source=ServerDatabase; Initial Catalog=NewDataBase; User ID=pras; Password=rita" />

  </appsettings>
  <system.web>
    <compilation debug="true" targetframework="4.5" />
    <httpruntime targetframework="4.5" />
        <authentication mode="Windows" />
        <rolemanager enabled="true" />
  </system.web>
  <system.servicemodel>
    <bindings>
      <webhttpbinding>
        <binding name="crossDomain" crossdomainscriptaccessenabled="true" />
      </webhttpbinding>
    </bindings>
    <behaviors>
      <endpointbehaviors>
        <behavior name="tSeyvaWCFEndPointBehavior">
          <webhttp />
        </behavior>
      </endpointbehaviors>
      <servicebehaviors>
        <behavior name="tSeyvaServiceBehavior">
          <servicemetadata httpgetenabled="true" httpsgetenabled="true" />
          <servicedebug includeexceptiondetailinfaults="true" />
        </behavior>
      </servicebehaviors>
    </behaviors>
    <protocolmapping>
      <add binding="basicHttpsBinding" scheme="https" />
    </protocolmapping>
    <servicehostingenvironment aspnetcompatibilityenabled="true" multiplesitebindingsenabled="true" />
    <services>
      <service name="AppServices.AppService" behaviorconfiguration="tSeyvaServiceBehavior">
        <endpoint address="" behaviorconfiguration="tSeyvaWCFEndPointBehavior">
                  bindingConfiguration="crossDomain" binding="webHttpBinding"

        contract="AppServices.IAppService"&gt;
        </endpoint>
      </service>
    </services>
  </system.servicemodel>
 <system.webserver>
    <modules runallmanagedmodulesforallrequests="true" />
    &lt;!--
        To browse web app root directory during debugging, set the value below to true.
        Set to false before deployment to avoid disclosing web app folder information.
      --&gt;
    <directorybrowse enabled="true" />
    <handlers accesspolicy="Read, Execute, Script" />
  </system.webserver>

</configuration>

**And this is the ajax call I have made:**

        var data = { 'logindetails': { 'UserName': UN, 'Password': PW } };
        var st = JSON.stringify(data);
        debugger;
        $.ajax({
            type: "POST",
            url: "http://192.168.4.89/mob/AppService.svc/GetUserAuthendication",
            data: st,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                ServiceSucceeded(result);
                //// Play with response returned in JSON format
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR + "-" + textStatus + "-" + errorThrown);
            }


        });

When I host my Wcf service in my local IIS and make an ajax call from my local machine itself, its working fine, but when I host my Wcf service in server and make an ajax call to that Wcf service hosted in server, from my local machine, I couldn't access it.
Please go through this code and help me in finding the problem