415 Unsupported Media Type; Angular2 to API

Question

i am new to angular 2 and i'm facing a problem which i cant find a solution: When i try to post from angular 2 to API i get - 415 unsupported media type.

Angular 2 code:

 onSubmit(value: any) {
    // console.log(value.message);
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    let creds = 'statusuknown';
    let body = JSON.stringify(creds);
    this.http.post('http://localhost:1318/api/ActionItem', creds)
      .subscribe(
        () => {console.log('Success')},
        err => {console.error(err)}
      );
  }

And my controller code:

 // POST api/actionitem
        [HttpPost]
        public ActionItem Post( [FromBody]string str)// _id, string _status)
        {
            ActionItem item = new ActionItem( 313, str);
            return item;
        }

when i change the controller code to not get data from body it works but refers NULL.

My API call screenshot: Please help & let me know if more details needed.

The error message is pretty self-descriptive: You send JSON and the server tells you _"I don't support JSON"_ — a better oliver, Apr 19 '17 at 08:11
@zeroflagL that makes sense, although im not sure ,when i use POSTMAN to post to my api it goes thru and return the value i need. how do i make my api support JSON? — Orenger, Apr 19 '17 at 11:45
I assume you don't set a `Content-Type` header when you use Postman. You only send a string in your example, so you actually don't need JSON. You can send `creds` directly. — a better oliver, Apr 19 '17 at 15:10
@zeroflagL i do set content-type when i use postman , otherwise it doesn't work, looks like it has something to do with my localhost use. i was informed to try post using a server and it will work! exactly how postman works! — Orenger, Apr 20 '17 at 12:51
I see. Then the problem could be CORS. That would mean that the server needs additional (or a different) configuration. — a better oliver, Apr 20 '17 at 13:57
as for now that seems to be the problem, i will use server with iis and will post afterwards — Orenger, Apr 20 '17 at 13:58

Victor Bredihin · Answer 1 · 2017-04-18T14:56:24.227

1

You defined headers, but didn't use it. Change your code to

this.http.post('http://localhost:1318/api/ActionItem', body, options).map(response => response.json())
      .subscribe(
        () => {console.log('Success')}
      );

edited Apr 18 '17 at 14:56

answered Apr 18 '17 at 13:27

Victor Bredihin

2,220
21
30

,still same issue - unsupported media type – Orenger Apr 18 '17 at 13:32
still no good, can i supply more info to give you better view of this issue? – Orenger Apr 18 '17 at 13:42
unfortunately rechecked and it didn't solve, i can tell you that my get does work if that helps you to understand better. – Orenger Apr 18 '17 at 13:45
could you try this url instead? http://jsonplaceholder.typicode.com/posts, so we make sure that's the problem not in your api – Victor Bredihin Apr 18 '17 at 13:50
here is a plunker https://plnkr.co/edit/kO2i4wf5fovx0TeT3c7A?p=preview Please check and confirm that your code looks the same – Victor Bredihin Apr 18 '17 at 13:58
201 and i get response id 101, can i add string to Body and link it to my api? or the api is the problem – Orenger Apr 18 '17 at 14:04
if your angular code looks the same, then the problem in your api. First you should check your code and make my plunker example works in your app, then change url to your api and see if it's still doesn't work – Victor Bredihin Apr 18 '17 at 14:07
your code works for me , when i changed the URL to my api i get - 415 unsupported media type., so i guess problem is my api but i still dont know what is the problem because its not in the code probably – Orenger Apr 18 '17 at 14:11
what's language of your backend? – Victor Bredihin Apr 18 '17 at 14:21
language is c# but i tried my code and its fine, the request to post is failing – Orenger Apr 18 '17 at 14:23
curl -H "Content-Type: application/json" -X POST -d 'statusuknown' http://localhost:1318/api/ActionItem Does it work? – Victor Bredihin Apr 18 '17 at 14:25
remove all from your api endpoint, including params and leave only "return 'test'" – Victor Bredihin Apr 18 '17 at 14:28
return "test" doesn't work and i get same unsupported media type – Orenger Apr 18 '17 at 14:33
your api doesn't accept 'Content-Type': 'application/json' – Victor Bredihin Apr 18 '17 at 14:40
try let body = JSON.stringify({}); with return 'test' – Victor Bredihin Apr 18 '17 at 14:44
taht the code right now , let body-JSON.stringify({}) – Orenger Apr 18 '17 at 14:49
make a screen of headers from your api. f12->networks->your_api_call->headers – Victor Bredihin Apr 18 '17 at 14:54
i didnt understand this comment, can u explain better? i will do it later tonight. thanks – Orenger Apr 18 '17 at 14:55
check attached to this question file – Victor Bredihin Apr 18 '17 at 14:56
and response tab too please – Victor Bredihin Apr 18 '17 at 14:57
i didnt understand the curl answer. posted screenshot in quetion – Orenger Apr 18 '17 at 15:07
you need to set Accept header, it should be like this 'Accept:application/json, text/plain, */*' I'm not familiar with C#, check these answers http://stackoverflow.com/questions/10679214/how-do-you-set-the-content-type-header-for-an-httpclient-request http://stackoverflow.com/questions/6224454/how-to-set-accept-and-accept-language-header-fields – Victor Bredihin Apr 18 '17 at 15:25
@Orenger did you fix your issue? – Euridice01 Apr 13 '18 at 19:51
@Euridice01 yes issue was fixed, i odnt think its relevant for today as it gets fixed by itself, problem with header – Orenger Apr 16 '19 at 13:01

score 0 · Answer 2 · answered Mar 06 '18 at 11:56

use header and body also in http request. in cread use value parameter of onSubmit function.

use following code

let creds=JSON.Stringify(value);

this.http.post('http://localhost:1318/api/ActionItem', creds, options)
     .map((res: Response) => res.json()).subscribe(res => {
       this.result = res;
       console.log(this.result);
     });

415 Unsupported Media Type; Angular2 to API

2 Answers2

Linked