Error when consuming an api web service from angular $ http.post? [duplicate]

Question

Error when consuming an api web service from angular $ http.post? [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

The error is as follows

This is my POST method in the Web Api

// POST api/values
[HttpPost]
public string Post(Persona persona)
{
     return "response: \"Suscrito\"";
}

and this is my angular code.

    $http.post('http://localhost:54969/api/values',
                $scope.persona).success(function (result) {
        alert('Success!');
    }).error(function (data) {
        alert("Error!");
    });

I do not understand the error and it is not clear to me if the error is in the service or in the angle.

Please someone help me!

angularjs asp.net-web-api

asked by Julian Vasquez Perez 12.03.2017 в 22:56

source

3 answers

How to take data from some input text and send it to mysql in java REST How to convert the data of ajax (DataTable) in a for cycle?

score 0 · Answer 1

I never used asp but you can try one of the solutions that there is here which is to add the following to the file Web.config

 <system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
      <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
     <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
  </httpProtocol>

score 0 · Answer 2

You could test your webservice by sending the parameter by Post and see if it gives the error there.

With angularjs, you arias it in this way

$scope.CrearUsuario = function(item)
        {
            $scope.item = item;
            $http({
                method: "POST",
                url: "http://localhost:808/sistemadrp/public/ws/usuarios",
                data: {
                    usuario:    item.usuario,
                    nombre:     item.nombre,
                    email:      item.email,
                    password:   item.password,
                    telefono:   item.telefono,
                    estado:     item.estado
                }
            }).then(function mySucess(response)
            {
                modalCrear.hide();
                UIkit.notify({
                                message : 'Registro creado exitosamente!',
                                status  : 'success',
                                timeout :  5000,
                                pos     : 'top-right'
                            });
               $window.location.reload();
            },function myError(response){
                console.log("Error");
            });
        }

the item parameter I use in the form ng-model="item.nombre1"

score 0 · Answer 3

The problem comes because you are trying to make an ajax call to a different domain than the one that is serving the front. From the backend you have to indicate that you "accept" calls from the front domain (or enable any domain with * , useful for public api's). To do this you must respond to requests with the following headers (so that the browser accepts the answers).

  // Headers para habilitar el acceso a tu front (En el caso que propones)
  "Access-Control-Allow-Origin", "localhost:53100"
  "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"
// Habilitar el acceso desde cualquier dominio
   "Access-Control-Allow-Origin", "*"
   "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"

In ASP.NET I can not help you at the code level, but here is a link that can help you link

This is known as CORS (Cross-Origin Resource Sharing) . If you search in google enable CORS in ASP.NET , you will find a lot of links that will help you.

I hope I have cleared your doubts a little more!