Why does not Angular 6 post method request WebApi MVC 5?

Question

I have a WebApi on which I have already sent a request from another application. Everything worked correctly. I wrote to WebApiConfig config.EnableCors(new EnableCorsAttribute("http://localhost:4200", headers: "*", methods: "*")); Now I have created another application and I want to postpone my post-method on this API. I created the form and wrote a method to submit it to the API

postUser(user: User) {
var httpOptions = { headers: new HttpHeaders({
  'Content-Type': 'application/json'
})};
var body = JSON.stringify(user);
return this.http.post<User>('http://localhost:51251/api/Users', body, httpOptions);
}

I have created the same custom classes on ts and cs

export class User {
Id: number;
Email: string;
Password: string;
ConfirmPassword: string;
}

public class User
{
    public int Id { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
    public string ConfirmPassword { get; set; }
}

my post-method in API:

// POST: api/User
    [ResponseType(typeof(User))]
    public IHttpActionResult PostUser(User user)
    {
        db.Users.Add(user);
        db.SaveChanges();

        return CreatedAtRoute("DefaultApi", new { id = user.Id }, user);
    }

In the console, log the body like this {"Id":null,"Email":"weferer@frr5","Password":"12","ConfirmPassword":"12"} But no request goes anywhere, and I can not understand why. No mistakes are displayed. What could be the reason?

Possible duplicate of [Angular 2 http.post() is not sending the request](https://stackoverflow.com/questions/36208732/angular-2-http-post-is-not-sending-the-request) — SiddAjmera, Oct 12 '18 at 19:23

score 1 · Accepted Answer · answered Oct 12 '18 at 19:20

1

In the Component or similar executing postUser() you must call subscribe() for the request to actually execute. Assuming postUser() in an Injectable service:

Service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class SomeService {
   constructor(private http: HttpClient) { }

   postUser(user: User) {
     const httpOptions = { headers: new HttpHeaders({
       'Content-Type': 'application/json'
     })};

     const body = JSON.stringify(user);

     return this.http.post<User>('http://localhost:51251/api/Users', body, httpOptions);
  } 
}

Component:

import { Component } from '@angular/core';
import { SomeService } from 'path/to/service';

@Component({ // ... })
export class AppComponent  {
  constructor(private someService: SomeService) {}

  someMethod() {
    this.someService.postUser(someUser).subscribe(results => console.log(results));
  }
}

Hopefully that helps!

answered Oct 12 '18 at 19:20

Alexander Staroselsky

37,209
15
79
91

Is now I have this errors: `zone.js:2969 OPTIONS http://localhost:51251/api/User net::ERR_CONNECTION_REFUSED ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}` – senjust Oct 12 '18 at 19:38
how can i fix it? – senjust Oct 12 '18 at 19:40
That looks like an issue with your server. This is being treated as a [Preflight request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request). You need to make sure your MVC 5 configuration is allowing OPTIONS requests. There are multiple questions including this [one](https://stackoverflow.com/questions/19095777/how-to-support-http-options-verb-in-asp-net-mvc-webapi-application) describing how to enable/allow OPTIONS. If you still have issues after trying those configurations, please create a new question targeting the MVC 5 portion of this issue. Thanks! – Alexander Staroselsky Oct 12 '18 at 19:43

Why does not Angular 6 post method request WebApi MVC 5?

1 Answers1