web-dev-qa-db-fra.com

Angular 5 appels post API

Je suis très nouveau dans Angular, Développer une application dans Angular 5. J'essaie de publier des données sur une API. Voici mon code. 

API Web .Net Core

    [Produces("application/json")]
    [Route("api/Audit")]
         public class AuditController : Controller
        {
            private IConfiguration _configuration;
            private CommomUtility util;
            private Login Login;

            public AuditController(IConfiguration configuration)
            {
                _configuration = configuration;
                util = new CommomUtility(configuration);
                Login = new Login(configuration);
            }

            [HttpPost]
            public JsonResult Action([FromBody] List<Dictionary<string, string>> li)
            {
                DataTable dt = new DataTable();
                string jsonString = string.Empty;
                try
                {
                    if (li[0]["ActionMethod"].Equals("CheckLogin", StringComparison.InvariantCultureIgnoreCase))
                    {
                        dt = Login.checkLogin(li);
                    }
                }
                catch (Exception ex)
                {
                }
                finally
                {
                    dt.TableName = "Result";
                    jsonString = util.DataTableToJson(dt);
                }
                return Json(JObject.Parse(jsonString));
           }
        }

Angular Connexion au composant

    import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpClientModule,HttpParams,HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username: string="";
  password: string="";
  loginBtnText: string='Log In';
  clearBtnText: string='Reset Fields';
  message:string;
  cssClass:string;

  constructor(private http:HttpClient  ) { }

  ngOnInit() {
  }

  checkLogIn(){
    const params = new HttpParams();
    params.set('ActionMethod', 'CheckLogin');
    params.set('StaffCode', '15989');
    params.set('Password', '#####');
    var queryHeaders = new HttpHeaders();
    queryHeaders.append('Content-Type', 'application/json');
   debugger
    var v= this.http.post("http://localhost:57863/api/Audit/",
      params,{ headers: queryHeaders}
    )
    .subscribe(data => 
    {alert('ok');},
     error => 
     {alert("Error");}
    );
  }

  clearFields(){
    this.username="";
    this.password="";
    this.message="";
  }

}

J'invoque checkLogIn () lors d'un clic de bouton. Après avoir appelé cette API, il parvient uniquement au constructeur de la classe d'API mais ne va pas dans la méthode API.

J'ai vérifié l'onglet Réseau de mon navigateur et il montre 

415 Type de support non pris en charge

 Header section of request

Lorsque j'invoque l'API Get (valeurs api) qui est par défaut, le modèle de l'API Web .Net Core fonctionne et affiche alerte alert mais échoue dans le cas de POST 

Mise à jour 1

 enter image description here

 enter image description here

angularangular5asp.net-core-webapi
3
Tanwer

On dirait que vous avez mentionné application/json dans l’API Web en tant que Produit ("application/json") mais ne le passez pas dans l’en-tête du code angulaire.

Essaye ça

import { HttpClient, HttpHeaders,HttpParams} from '@angular/common/http';

si vous ne pouvez pas modifier l’API Web, changez le code angulaire comme indiqué ci-dessous et conservez l’API Web en l'état.

angulaire 

checkLogIn(){
    var requestData=[];

    var params={
      "ActionMethod":"CheckLogin",
      "StaffCode":"15989",
      "Password":"####"
    }
    requestData.Push(params);

    const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type':  'application/json'
          })
        };

    //pass it if you can't modify web api
    var v= this.http.post("http://localhost:5000/api/Audit/",
      requestData,httpOptions
    )
    .subscribe(data => 
    {alert('ok');},
     error => 
     {alert("Error");}
    );

}

si vous pouvez changer d'api web alors,

angulaire 

checkLogIn(){
    var requestData=[];

    var params={
      "ActionMethod":"CheckLogin",
      "StaffCode":"15989",
      "Password":"####"
    }


    const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type':  'application/json'
          })
        };

   //pass it like this if you can change web api
    var v= this.http.post("http://localhost:5000/api/Audit/",
      params,httpOptions
    )
    .subscribe(data => 
    {alert('ok');},
     error => 
     {alert("Error");}
    );
}

contrôleur d'api web 

public class LoginContract
{
    public string ActionMethod { get; set; }
    public string StaffCode { get; set; }
    public string Password { get; set; }
}

[HttpPost]
public JsonResult Action([FromBody] LoginContract li)
{
    DataTable dt = new DataTable();
    string jsonString = string.Empty;
    try
    {
        if (li.ActionMethod.Equals("CheckLogin", StringComparison.InvariantCultureIgnoreCase))
        {
            dt = Login.checkLogin(li);
        }
    }
    catch (Exception ex)
    {
        Console.Write(ex);
    }
    finally
    {
        dt.TableName = "Result";
        jsonString = util.DataTableToJson(dt);
    }
    return Json(JObject.Parse(jsonString));
}

Je pense que vous n'avez pas activé le module Cors dans votre API Web. Ajoutez le code suivant à Startup.cs de votre API Web.

Si vous n'avez pas installé le paquet de nuget CORS

Install-Package Microsoft.AspNetCore.Cors

Ajoutez le code dans ConfigureServices method.

services.AddCors(options =>
            {
                options.AddPolicy("AllowAll",
                    builder =>
                    {
                        builder
                        .AllowAnyOrigin() 
                        .AllowAnyMethod()
                        .AllowAnyHeader()
                        .AllowCredentials();
                    });
            });

Maintenant, dans la méthode Configure, ajoutez le code suivant avant-app.UseMvc () .

app.UseCors("AllowAll");

J'espère que cela résoudra votre problème. Si vous avez des problèmes ou des doutes faites le moi savoir.

2
Suvethan Nantha

Vous êtes confronté au problème des erreurs de COARS, très célèbre.

webapiconfig.cs

  var cors = new System.Web.Http.Cors.EnableCorsAttribute("http://localhost:51156", 
  "*", "*");

        config.EnableCors(cors);

        // ADD JUST THIS LINE TO REGISTER FOLLOWING CLASS.
        config.Formatters.Add(new BrowserJsonFormatter());

maintenant ajouter le code suivant pour ovverride

// TO SEE DATA IN JSON IN CHROME BROWSER ADD FOLLOWING CLASS BrowserJsonFormatter and REGISTER IN METHOD ADD NEW OBJECT OF THIS CLASS.
public class BrowserJsonFormatter : System.Net.Http.Formatting.JsonMediaTypeFormatter
{
    public BrowserJsonFormatter()
    {
        this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        this.SerializerSettings.Formatting = Formatting.Indented;
    }

    public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
    {
        base.SetDefaultContentHeaders(type, headers, mediaType);
        headers.ContentType = new MediaTypeHeaderValue("application/json");
    }
}

//-----------------------------------------------------------------------------------------------------------------------
0
Ashish Kamble

Le type de contenu semble être faux. Vous pouvez essayer d’envoyer directement un objet JSON en tant que charge utile . `

const payload = 
{'ActionMethod': 'CheckLogin',
'StaffCode': '15989',
'Password': 'a$a#'
}
var v= this.http.post("http://localhost:57863/api/Audit/",payload)`
0
Brian Li

Error 415 Unsupported media type Dire que la valeur de l'en-tête de requête content-type n'est pas celle attendue par le serveur dans la requête. Essayez de définir l'en-tête de type de contenu sur value application/json dans angular.

0
Agam