405 method not allowed error when making http post request from angular to web api

I have an angular app with a .net core web-api as the back end. the get request from the client works as expected and data from the server is fetched.

but when i try to post from the client to the server i get a 405 method not allowed error.

i have implemented the CORS middle ware found at this answer :

httpContext.Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:4200");
httpContext.Response.Headers.Add("Access-Control-Allow-Credentials", "true");
httpContext.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name");
httpContext.Response.Headers.Add("Access-Control-Allow-Methods", "POST,GET,PUT,PATCH,DELETE,OPTIONS");


web-api controller

[Route("api/[controller]")]
[ApiController]
public class PostsController : ControllerBase
{
[HttpGet]
public ActionResult<List<Post>> Get()
{
return _repository.Get().ToList();
}

[HttpPost]
public IActionResult Post([FromBody] Post post)
{
if (post == null)
{
return BadRequest();
}
_repository.Add(post);
_repository.Save();
return CreatedAtRoute("GetPostById", new { ID = post.Id }, post);
}
}


Post model on server

public class Post
{
[Key]
public int Id { get; set; }
public string Title { get; set; }
public string Content { get; set; }
}


app.component.ts

apiUrl = 'http://localhost:33633/api/posts';
constructor(private http: HttpClient) {}

onCreatePost(postData: { title: string; content: string }) {

this.http.post(this.apiUrl, postData).subscribe(responseData =>
{
console.log(responseData);
})
}
onFetchPosts() {
this.http.get(this.apiUrl).subscribe(responseData =>
{
console.log(responseData);
})
}


console error when trying to post to server:

what could be the reason for this error?

---Edit - found a solution--- in this answer

i added a base controller with the method

public HttpResponseMessage Options()
{
return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
}


and now it works.

Continue reading...