Angular 5 Post API 调用

Posted 2023-03-31

【中文标题】Angular 5 Post API 调用

【英文标题】：Angular 5 Post API Call

【发布时间】：2018-04-06 05:24:23

【问题描述】：

我对 Angular 很陌生，在 Angular 5 中开发应用程序。我正在尝试将一些数据发布到 API，下面是我的代码

.Net Core Web API

    [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 登录组件

    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="";
  

我在按钮单击时调用 checkLogIn()，在调用此 API 后，它只到达 API 类的构造函数，但不进入 API 方法。

我检查了我的浏览器网络选项卡，它显示了

415 不支持的媒体类型

当我调用 Get API (values api) 时，它默认出现在 .Net Core Web API 模板中，它可以正常工作并显示警报 OK，但在 POST 的情况下失败

更新 1

【问题讨论】：

可以分享一下json示例吗？

@SuvethanNantha，什么 json？

请求POST的json

检查 HttpParams 部分

好的，给我几分钟

【参考方案1】：

似乎您在 Web API 中将 application/json 提到为 Produces("application/json")，但没有在 Angular 代码的标头中传递它。

试试这个

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

如果无法更改 web api，则如下所示更改 angular 代码并保持 web api 不变。

角度

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");
    );

如果你可以更改 web api 那么，

角度

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");
    );

网络 API 控制器

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));

我认为您尚未在 Web api 中启用 Cors 模块。将以下代码添加到您的 Web api 的 Startup.cs。

如果你还没有安装 CORS nuget 包

Install-Package Microsoft.AspNetCore.Cors

在 ConfigureServices 方法中添加代码。

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

现在在 Configure 方法中在 app.UseMvc() 之前添加以下代码。

app.UseCors("AllowAll");

我希望这能解决您的问题。如果您有任何问题或疑问，请告诉我。

【讨论】：

现在它说 404 Not Found 。它应该将 Content Type 设置为 json 但在标题中它只显示 'Access-Control-Request-Headers: content-type' 和 'Request Method: OPTIONS' 而不是 POST

@Jack 我已经检查过它对我有用吗？可以有错误，但不能是404。可以附上截图吗？

，检查更新 1 ，我已经发布了两个截图

@Jack 检查更新的答案，你得到的错误是因为 cors 没有启用

，它可以工作，点击 api 但参数为空，仍然有东西阻止参数设置

【参考方案2】：

错误415 Unsupported media type 说请求标头content-type 的值不是服务器在请求中期望的值。尝试将 content-type 标头设置为 Angular 中的 application/json 值。

【讨论】：

我确实添加了 Content Type ，检查我更新的帖子，但在网络选项卡中它仍然显示 Content-Type: application/x-www-form-urlencoded;charset=UTF-8

但是您没有在请求中传递 json 对象。直接在请求中传递 json payload。

@Jack 在 ajax 世界中这是一个非常普遍的问题。在互联网上搜索有关此的内容。要解决这个问题，您的服务器应该返回缺少的标头以及您的 Angular 应用程序的主机名，或者如果您的 Angular 应用程序部署在同一台服务器上，请在 ajax 调用中使用相对路径。

【参考方案3】：

内容类型似乎是错误的。您可以尝试直接发送 JSON 对象作为有效负载。 `

const payload = 
'ActionMethod': 'CheckLogin',
'StaffCode': '15989',
'Password': 'a$a#'

var v= this.http.post("http://localhost:57863/api/Audit/",payload)`

【参考方案4】：

您正面临 COARS 错误问题，非常有名 当您调用另一个进程链接命中时，请不要惊慌 做

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());

现在将以下代码添加到 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");
    


//-----------------------------------------------------------------------------------------------------------------------