javascript - Angular 2 http.post 无法与 Web api 一起使用

Question

我的 Web Api 核心 Controller 方法如下所示

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

因此，如果我使用 header ，我会得到 No 'Access-Control-Allow-Origin' header is present

如果我不使用 header ，我会得到(不支持的媒体类型)

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

Answer 1

1. 您需要使用 header 来告诉 API 方法您要发送的内容。

2. 您需要在 .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”只是一个示例，您可以随意命名它。