Angular Post to Asp.Net (not Core) Web Api Error 415 on IIS

Question

I'm going completely nuts in making a simple Web Api call to work and I'm quite frustrated because things are much more complicated than they should be.

I created an extremely simple Web Api (for testing) that is consumed by an Angular 6 client and I was able to make it to work if I self-host it locally but if I publish it to my Win10 local IIS (that is the way it will work when deployed to a server) then the request to Web Api fails with error 415 "Unsupported Media Type".

The weird thing is that if I make the request to the self-hosted Web Api (which works) browser network tab is quite different than requesting to IIS published version.

This is my Web Api method:

[HttpPost]
[HttpOptions]
public void Post([FromBody]Credentials cred)
{
    string strTest = "I'm doing just nothing";
}

I have to mention that it took me a whole morning to make it to work even self-hosted because of CORS and the key was adding the [HttpOptions] in method header.

Class Credentials:

public class Credentials {
    public string Username { get; set; }
    public string Password { get; set; }
}

Angular post code:

let headers={
    headers: new HttpHeaders({
        'Accept': 'application/json',
        'Content-Type': 'application/json; charset=UTF-8'
    })
}

return this.http.post<any>('http://localhost:9810/api/Login', JSON.stringify({username, password}), headers) ...

Network tab info when self-hosted (working one):

General:
Request URL: http://localhost:9000/api/Login
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:9000
Referrer Policy: no-referrer-when-downgrade

Response Headers:
Content-Length: 0
Date: Thu, 30 Aug 2018 09:24:50 GMT
Server: Microsoft-HTTPAPI/2.0

Request Headers:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:9000
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Network tab info when published to local IIS (NOT working one):

General:
Request URL: http://localhost:9810/api/Login
Request Method: OPTIONS
Status Code: 415 Unsupported Media Type
Remote Address: [::1]:9810
Referrer Policy: no-referrer-when-downgrade

Response Headers:
Content-Length: 801
Content-Type: application/json; charset=utf-8
Date: Thu, 30 Aug 2018 08:57:58 GMT
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET

Request Headers:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:9810
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

So, as you see, when the Web Api is published to IIS the output in network tab is different and the header is not arriving.

I'm completely stuck and frustrated my friends. Please help.

Edit 1: I add my WebApiConfig where you can see I enable cors just in case.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
        config.EnableCors(cors);
    }
}

Answer 1

Again, I'll never understand why things are so complicated (and sometimes contradictory) when they shouldn't.

The way I was able to make the request successfully in self-hosted Web Api as well as published in IIS Web Api was to replace application/json by application/x-www-form-urlencoded but why? This is a contradiction as I'm clearly sending json data.

Anyway, not it works so I'll mark my own question as resolved.

let headers={
    headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    })
}