Angular 2 http.post 不适用于 web api

Posted 2023-02-22

【中文标题】Angular 2 http.post 不适用于 web api

【英文标题】：Angular 2 http.post not working with web api

【发布时间】：2017-11-10 18:42:45

【问题描述】：

我的 Web Api 核心控制器方法是这样的

public void Post(Sample sample) 
         _sampleService.CreateSample(sample);
    

示例 POCO 看起来像这样

  public class Sample : BaseEntity

    public string BarCode  get; set; 
    public DateTime CreatedAt  get; set; 
    public virtual User CreatedBy  get; set; 
    public virtual Status Status  get; set; 

客户端示例对象目前仅发送 2 个属性，如下所示。

barcode:"1234"createdAt:"2017-06-07"

http 帖子看起来像这样

createSample(sample: Sample) 
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(AppConstants.createSample, JSON.stringify(sample),  headers: headers )
  .map((res: Response) => res.json());  

所以如果我使用标题，我会得到 No 'Access-Control-Allow-Origin' header is present

如果我不使用标题，我会得到（不支持的媒体类型）

知道这里发生了什么。 更新 所以我按照第一个答案中的说明进行操作，看起来 CORS 未设置属性，但现在 JSON 未转换为 C# 对象

【问题讨论】：

看起来是 CORS 问题。

不是 CORS 问题，其余调用正常。 CORS 已全局启用

【参考方案1】：

您需要使用标头告诉 API 方法您要发送什么。

您需要在您的 .Net Core 应用程序Startup.cs 中启用 CORS，以便您的 API 允许来自其他来源的请求（基本上接受来自您的客户端应用程序 url 的调用） - 并将 CORS 设置为 AllowAnyMethod ()

您可以在 ConfigureServices() 方法中使用以下代码：

var corsUrls = new List<string>()"http://localhost:4200", "https://mylivesite.com";

services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>

    builder
      .AllowAnyMethod() //<--this allows preflight headers required for POST
      .AllowAnyHeader() //<--accepts headers 
      .AllowCredentials() //<--lets your app send auth credentials
      .WithOrigins(corsUrls.ToArray()); //<--this is the important line
));

services.Configure<MvcOptions>(
    options =>  options.Filters.Add(new CorsAuthorizationFilterFactory("CorsPolicy")); );

最后在你的Configure() 方法中：

app.UseCors("CorsPolicy");

请注意，我使用的策略名称"CorsPolicy" 只是一个示例，您可以随意命名。

【讨论】：

几分钟后试试这个

这是您的客户端和服务器之间的映射问题 - 我猜这是因为您的案例不匹配并且您在调用 services.AddMvc(...) mvcBuilder.AddJsonOptions( x => x.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());

作为它的 mvc 核心，所以我尝试了 services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver()) 但看起来只是在 post 方法中添加 [FromBody]它可以工作，但只能通过 Angular 应用程序中的 PostMan 它仍然为空。如果我使用动态或 JObject 效果很好

可能与数据类型有关。从部分 JSON 对象到 POCO 的转换可能无效 - 尝试创建一个更简单的类（字符串类型属性最容易开始）并使用它 - 如果它有效，则一次更改一个属性类型，直到它停止工作 - 然后你知道问题出在哪里。

所以问题是如果我的打字稿对象包含日期它在服务器端变为空。例如，我在 POCO 中有 datetimr 属性，并且在我的 typescript 对象中有 createdAt: Date ，它不起作用