Angular 2 http.post not working with web api

Question

My Web Api Core Controller Method looks like this

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

Sample POCO looks like this

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

on the client side sample object is only sending 2 properties for now and looks like this.

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

and the http post looks like this

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

so if i user headers i get No 'Access-Control-Allow-Origin' header is present

if i not use headers i get (Unsupported Media Type)

any idea whats going on here. UPDATE so I followed instructions as in first answer and looks like CORS is not set property but now JSON is not being converted to C# Object

Not a CORS issue rest of calls are working. CORS was enabled globally — Raas Masood
– Raas Masood, Commented Jun 8, 2017 at 22:03

Steve Land · Accepted Answer · 2017-06-08 22:10:31Z

1

You need to use headers to tell the API method what you're sending.
You need to enable CORS in your .Net Core app Startup.cs so that your API allows requests coming from another origin (accepts calls from your client app url, basically) - and set CORS to AllowAnyMethod()

You do this with the following code in your ConfigureServices() method:

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

and then finally in your Configure() method:

app.UseCors("CorsPolicy");

Note that the policy name "CorsPolicy" that I've used is just an example, you can call it whatever you like.

edited Jun 8, 2017 at 22:10

answered Jun 8, 2017 at 22:02

Steve Land

4,8622 gold badges20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Raas Masood Over a year ago

Will try this in couple of minutes

Steve Land Over a year ago

This is a mapping problem between your client and server - my guess is that its because your cases dont match and you havent set the following after you call services.AddMvc(...)

mvcBuilder.AddJsonOptions(                     x => x.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());

Raas Masood Over a year ago

as its mvc core so i tried services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver()) but it looks like by just adding [FromBody] in post method it works but only through PostMan from Angular app it still getting null. It works fine if i use dynamic or JObject

Steve Land Over a year ago

Possibly data type related then. The conversion from partial JSON object to your POCO might be invalid - try making a simpler class (string type properties are simplest to start with) and use that - if it works, then change one property type at a time until it stops working - then you know where the problem is.

Raas Masood Over a year ago

So the problem is that if my typescript object contains date it becomes null on server side. For example of i have datetimr propery in POCO and createdAt: Date in my typescript object , it doesn't work

|

Collectives™ on Stack Overflow

Angular 2 http.post not working with web api

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related