Angular 2 http.post无法使用web api

时间:2017-06-08 21:44:24

标签: javascript angular asp.net-web-api http-post

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

所以如果我的用户标题我得到没有'Access-Control-Allow-Origin'标题存在

如果我没有使用我得到的标题(不支持的媒体类型)

这里有什么想法。 的更新 所以我按照第一个答案中的说明进行操作,看起来CORS没有设置属性,但现在JSON没有被转换为C#Object enter image description here

1 个答案:

答案 0 :(得分:1)

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

  2. 您需要在.Net核心应用Startup.cs中启用CORS,以便您的API允许来自其他来源的请求(基本上接受来自客户端应用网址的呼叫) - 并将CORS设置为 AllowAnyMethod()

  3. 您可以使用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"只是一个示例,您可以随意调用它。