Angular 5无法在WebApi中调用方法“post”

我想从angular 5调用Web api中的函数

这是我在api中的函数。服务ts:

//it works
public getAllTodos() {
    return this.http
      .get(API_URL + '/todos/')
      .map(response => {
        const todos = response.json();
        return todos.map((todo) => new Todo(todo));
      })
      .catch(this.handleError);
  }
  
  //it doesn't work
  public createTodo(todo: Todo) {
    let headers = new Headers({ 'Content-Type': 'application/json' });        
    //let options = new RequestOptions({ headers: headers });
    let payload = JSON.stringify(todo);
    return this.http
      //.post(API_URL + '/todos/', JSON.stringify(todo), options)
      .post(API_URL + '/todos/', payload, {headers: headers})
      .map(response => {
        return new Todo(response.json());
      })
      .catch(this.handleError);
  }

这是我在Web Api中的函数:

[HttpGet]
    [Route("todos")]
    public HttpResponseMessage GetAllTodos()
    {
        try
        {                
            List<Todo> todos = manager.GetAll().ToList();
            return Request.CreateResponse(HttpStatusCode.OK, todos);
        }
        catch (Exception ex)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex.Message);
        }
    }

    [HttpPost]
    [Route("todos")]
    public HttpResponseMessage CreateTodo([FromBody] Todo todo)
    {
        try
        {
            Todo td = new Todo() { title = todo.title, complete = todo.complete };
            int id = manager.CreateTodo(td);
            return Request.CreateResponse(HttpStatusCode.OK, id);
        }
        catch (Exception ex)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex.Message);
        }
    }

我在Web API中设置了一个断点,但它没有收到来自angular客户端的任何调用。然而,它适用于“get”方法。

请告诉我为什么“post”功能不起作用,以及解决方法。

我附上下面的图片。

非常感谢。