ajax without query permission

Question

I have a wcf webservice on the link http://food-fast-com.web27.redehost.net/ServiceUsuario.svc/ConsultarRegistroPorCodigo/2, I can consume it without problem in my local iis with ajax:

Consulta Usuario

      <div><table id="datagrid"></table></div>
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ConsUsuario(){
        var value = $("#codUser").val();

        $.ajax({
        type: "GET",
        //url: "ServiceRestPub/ServiceUsuario.svc/ConsultarRegistroPorCodigo/" + value,
        url: "http://food-fast-com.web27.redehost.net/ServiceUsuario.svc/ConsultarRegistroPorCodigo/" + value,
        contentType: "application/json",
        dataType: "json",
        success: function (result) {
          var tabela = $("#datagrid");
                            var rows = "";
                            tabela.find("tbody td").remove();

                                rows += "<tr>";
                                rows += " <td>" + result.ConsultarRegistroPorCodigoResult.Codigo + "</td>";
                                rows += " <td>" + result.ConsultarRegistroPorCodigoResult.Login + "</td>";
                                rows += " <td>" + result.ConsultarRegistroPorCodigoResult.Nome+ "</td>";
                                rows += " <td> <input type='checkbox' /> </td>";
                                rows += "</tr>";

                tabela.html('<tbody>' + rows + '</tbody>');
            }
        });
    }
 </script>

However, when consuming the link posted above I have the following return: No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'http://localhost'. I tried to put the following code in Webconfig:

 <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />-
      </customHeaders>
    </httpProtocol>
    <modules runAllManagedModulesForAllRequests="true" />
    <directoryBrowse enabled="false" />
  </system.webServer>

In my place it works, but when I upload to my server the following error:

This configuration section cannot be used at this path. This happens when the section is locked at a parent level. Locking is either by default (overrideModeDefault="Deny"), or set explicitly by a location tag with overrideMode="Deny" or the legacy allowOverride="false".

I spoke to the support staff he said it is standard not to allow this kind of implementation in webconfig.

How do I consume with ajax this webservice?

Answer 1

Remove Contenttype from the request and add:

 crossDomain: true,
 dataType: 'jsonp',

Follows:

$.ajax({
   type: "GET",
   url: "http://food-fast-com.web27.redehost.net/ServiceUsuario.svc/ConsultarRegistroPorCodigo/" + value,
   crossDomain: true,
   dataType: 'jsonp',
   success: function (result) { ... },
   error: function(data){ ... }

If you Wish to force a crossDomain request (such as JSONP) on the same Domain, set the value of crossDomain to true. This Allows, for example, server-side redirection to Another Domain

http://api.jquery.com/jquery.ajax/