当前位置: 首页 > 知识库问答 >
问题:

角5后API调用

狄元魁
2023-03-14

我对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不支持的媒体类型

当我调用默认的getapi(valuesapi)时,就会出现。Net核心Web API模板无法正常工作,并显示警报OK,但在发布时失败

更新1

共有3个答案

宗政小林
2023-03-14

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

const payload = 
{'ActionMethod': 'CheckLogin',
'StaffCode': '15989',
'Password': 'a$a#'
}
var v= this.http.post("http://localhost:57863/api/Audit/",payload)`
汪博艺
2023-03-14

错误415不支持的媒体类型表示请求头Content ent-type的值不是服务器在请求中期望的值。尝试将内容类型标头设置为角值应用程序/json。

鄢翰藻
2023-03-14

似乎您在web API中将application/json称为products(“application/json”),但没有从代码的头中传递它。

试试这个

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

web 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

将代码添加到配置服务方法中。

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

现在在配置方法中,在应用程序之前添加以下代码。UseMvc()。

app.UseCors("AllowAll");

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

 类似资料:
  • 我最近将我的Angular应用程序从4.3升级到5.0,并试图围绕其中的一些新功能进行游戏。其中之一是消除zone.js.的依赖性 main.ts: 组成部分: 在我的组件中,Ngondestory()事件被触发,但ngOnInit()没有被触发。由于ngOnInit()不起作用,_onRouteChange永远不会初始化,我在这一行得到错误_onRouteChange。取消订阅();在恩格德斯特

  • 我有一个应用程序与Spring-Boot一起提供服务。我已经为“API/...”添加了一些控制器--这些调用可以执行Angular Frontend需要的不同操作。我如何保护这些URL以便只有我的前端可以访问examlpe.com/api/...而不是每个用户?我不希望任何人能够访问examlpe.com/api/..但是他们应该能够访问example.com。 url example.com/a

  • 我想连接到http://api.themoviedb.org,以便执行GET请求。由于我使用的浏览器(离子服务-l)我得到CORS错误。为了避免CORS错误,我尝试使用JSONP,但没有成功。 以下是我所做的: > 从'@角/公共/超文本传输协议'导入{HttpClientModuelHttpClientJsonpModuel}; ... 导入:[BrowserModuelIonicModule.

  • links 目录 上一节: main.main之前的准备 下一节: 调度器相关数据结构

  • 我一直在玩新的MVC5,我有一些模型,控制器和视图设置使用代码优先迁移。 我的问题是我如何种子用户和角色?我当前在Configuration.cs中的seed方法中种子了一些参考数据。但在我看来,user和roles表是在AccountController首次被点击之前才创建的。 我目前有两个连接字符串,这样我就可以将我的数据和身份验证分离到不同的数据库中。 我如何使用户、角色等表与其他表一起填充

  • 我有下面的AuthenticationResponse模型,用于使用Reform2的3个api调用。如果我进行verifyEmail调用f.e.,JSON响应主体只包含有效电子邮件的属性(例如{“validEmail”:true})。其他2个调用仅包含“ResetSuccessful”或其他4个调用的属性。 我如何确保/检查收到verifyEmail呼叫f.e.的响应时,它包含validEmail