Erro ao tentar consumir servi�o WebAPI

07/07/2016

desde hoje pela manh� tento pegar um JSON que um WebAPI disponibiliza. Primeiramente tentei com insira o c�digo aquiAngularJS e n�o estava evoluindo, ent�o fui para o cl�ssico Jquery/Ajax e mesmo assim n�o obtive �xito. No meu WebAPI eu, via NuGet, instalei o CORS, pois a raz�o disso � fazer funcionar com Cross-Domain. Fiz um exemplo simples, usando CROSS-DOMAIN e funcionou bem. O que passa � que pelo projeto que tenho aqui na empresa � que n�o est� funcionando, ou seja, n�o consigo pegar o JSON no meu client. O servi�o est� funcionando bem. Bem, vou postar os c�digos e caso a pergunta ainda n�o estar clara, favor, sintam-se a vontade para questionar/perguntar. Abaixo est� o JSON capturado no Browser. Observe, que pelo ajax, eu n�o tenho um data(foi o que eu entendi), mas sim um data.items.

{
  "totalRecords": 40,
  "pagination": {
    "pageIndex": 1,
    "pageSize": 40,
    "lastPage": 1
  },
  "sort": {
    "fields": "Nome",
    "directions": "ASC"
  },
  "items": [
    {
      "id": 49,
      "nome": "Assinatura PME",
      "tipoContato": {
        "codigo": "T",
        "descricao": "Texto"
      },
      "dataUltimaAtualizacao": "2015-06-11T22:13:52",
      "loginUltimaAtualizacao": "Teste"
    },
    {
      "id": 14,
      "nome": "Capa para Baixo - Cartas",
      "tipoContato": {
        "codigo": "T",
        "descricao": "Texto"
      },
      "dataUltimaAtualizacao": null,
      "loginUltimaAtualizacao": null
    }
  ]
}

Esse � o c�digo do servi�o(ApiController):

using System.Web.Http.Cors;
namespace X.EstruturaOrganizacional.Api.Controllers
{
    [RoutePrefix("api/estruturaOrganizacional")]
    [EnableCors(origins: "http://localhost:64628/", headers: "*", methods: "*")]
    public class TipoContatoOperadoraController : ApiXController
    {
        private readonly ITipoContatoOperadoraService service;

        public TipoContatoOperadoraController()
        {
            DependencyResolver.Resolve(Container);

            service = Container.Resolve<ITipoContatoOperadoraService>();
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing && service != null)
            {
                service.Dispose();
            }

            base.Dispose(disposing);
        }

        [HttpGet]
        [Route("tiposContatoOperadora")]
        //[CleanOutCompression]
        [CacheOutput(ClientTimeSpan = 10, ServerTimeSpan = 10)]
        public Task<HttpResponseMessage> ObterTiposContatoOperadora(
            string sortFields = "Nome",
            string sortDirections = "ASC",
            int? pageSize = null,
            int pageIndex = 1)
        {
            IEnumerable<TipoContatoOperadora> lista = service.Listar(
                sortFields,
                sortDirections,
                pageSize,
                pageIndex,
                out recordCount,
                out sorts);

            return CreateResponseForList(lista.ToListModel(), pageIndex, pageSize);
        }

        [HttpGet]
        [Route("tiposContatoOperadora/")]
        //[CleanOutCompression]
        [CacheOutput(ClientTimeSpan = 10, ServerTimeSpan = 10)]
        public Task<HttpResponseMessage> ObterTipoContatoOperadoraPorId(
            byte id)
        {
            TipoContatoOperadora item = service.ConsultarPorCodigo(id);

            return CreateResponseForItem(item.ToModel());
        }
    }
}

E aqui est� o meu client(Angular)

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Tipo Contato Operadora</h2>

<div data-ng-controller="TipoContatoOperadoraController">
    <div class="panel panel-default">
        <div class="panel-heading">Lista de Tipo de Contato das Operadoras</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                        <strong>{}</strong>
                    </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <tr>
                                    <th>Cod. Tipo Contato</th>
                                    <th>Nome Tipo Contato</th>
                                    <th>Ind. Tipo Contato</th>
                                    <th>Data Atualiza��o</th>
                                    <th>Cod. Usu�rio</th>
                                </tr>
                                <tr data-ng-repeat="lista in listaTipoContatoOperadora">
                                    <td>{{ lista.id }}</td>
                                    <td>{{ lista.nome }}</td>
                                    <td>{{ lista.tipoContato }}</td>
                                    <td>{{ lista.dataUltimaAtualizacao }}</td>
                                    <td>{{ lista.loginUltimaAtualizacao }}</td>
                                </tr>
                            </table>
                        </div>
                    <input type="button" value="Tente Isso" onclick="sendRequest()" />
                    <span id='value1'>(Result)</span>
                </div>
            </div>
        </div>
    </div>
</div>

Minha controller Angular:

var app = angular.module('app', []);

//app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController]);

app.controller('TipoContatoOperadoraController', function ($scope, $http) {

    $http.get('http://localhost:7215/api/estruturaOrganizacional/tiposContatoOperadora')
    .success(function (data) {

        $scope.listaTipoContatoOperadora = data.items;
    })
    .error(function () {
        $scope.erro = 'Erro: N�o foi poss�vel carregar a lista do tipo de contato das operadoras.';
    });
})

Numa tentativa de n�o utilizar o Angular, comentei toda chamada ao Angular e fiz esse Javascript, que coloquei abaixo na minha Index:

@section scripts {
    <script>
    // TODO: Replace with the URL of your WebService app
        var serviceUrl = 'http://localhost:7215/api/estruturaOrganizacional/tiposContatoOperadora';

    function sendRequest() {
        var method = $('#method').val();

        $.ajax({
            type: method,
            url: serviceUrl
        }).done(function (data) {
            $('#value1').text(data);
        }).error(function (jqXHR, textStatus, errorThrown) {
            $('#value1').text(jqXHR.responseText || textStatus);
        });
    }
    </script>
}

Esse � o erro que d� no momento em eu tento consumir o servi�o:

XMLHttpRequest cannot load http://localhost:7215/api/estruturaOrganizacional/tiposContatoOperadora. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64628' is therefore not allowed access. The response had HTTP status code 500.

O button Tente Isso e o span, utilizei com o javascript puro para testes, sem a table do Angular.

O AngularJS est� funcionando, pois o Controller do AngularJS exibe a mensagem de erro cna p�gina que vem do Servi�o, est� sendo exibida. O problema mesmo est� na serializa��o(JSON), ou seja, n�o consigo pegar o JSON do servi�o(function(data)).

Pjava

Curtir t�pico + 0

Responder

Posts

07/07/2016

Pjava

Dentro da minha controller WebApi, eu tenho esse m�todo:

[HttpGet]
[Route("tiposContatoOperadora")]
//[CleanOutCompression]
[CacheOutput(ClientTimeSpan = 10, ServerTimeSpan = 10)]
public Task<HttpResponseMessage> ObterTiposContatoOperadora(
string sortFields = "Nome",
string sortDirections = "ASC",
int? pageSize = null,
int pageIndex = 1)
{
IEnumerable<TipoContatoOperadora> lista = service.Listar(
sortFields,
sortDirections,
pageSize,
pageIndex,
out recordCount,
out sorts);

return CreateResponseForList(lista.ToListModel(), pageIndex, pageSize);
}
Ser� que nesse m�todo � que eu tenho que configurar o Header para impedir o erro?

Responder

Gostei + 0

21/07/2016

Jos� Ferreira

Acho que voc� deveria primeiro, testar sem utilizar o angularJS, tente simular a solicita��o Get ou Post utilizando Postman, para voc� ter certeza que est� tudo configurado certinho pro lado Back-end.

Responder

Gostei + 0