Angular2 Post application/json

Question

I receive a 405 error when I attempt to POST application/json using Angular2. I know its not a CORS issue because all of the server response headers are in place (Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin) and I can do a POST when the content type is application/x-www-form-urlencoded.

Is there a known issue with trying to POST application/json with Angular2?

The server side code is written in C# using MS Web API with IIS server.

Request Info:

Request URL:http://localhost:9090/api/Authentication/login
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Remote Address:[::1]:9090
Response Headers
view source
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Allow:POST
Cache-Control:no-cache
Content-Length:76
Content-Type:application/json; charset=utf-8
Date:Fri, 18 Mar 2016 14:27:27 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:9090
Origin:http://localhost:3000
Referer:http://localhost:3000/login
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Code:

import { Component, View } from 'angular2/core';
import { Router, RouterLink } from 'angular2/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
import { Http, Headers, RequestOptions} from 'angular2/http'; 

@Component({
    selector: 'login'
})
@View({
    directives: [RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES],
    templateUrl: 'app/login/login.html',
    styles: ['app/login/login.css']
})
export class Login {
    constructor(public router: Router, public http: Http) {
    }

    login(event, username, password) {
        event.preventDefault();
        let body = JSON.stringify({ userName: "user", password: "pwd", apiKey: "key", role: "role" });
        let headers = new Headers({ 'content-type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        this.http.post('http://localhost:9090/api/Authentication/login', body, options)
            .subscribe(
                response => {
                    localStorage.setItem('jwt', response.json().id_token);
                    this.router.parent.navigateByUrl('/home');
                },
                error => {
                    alert(error.text());
                    console.log(error.text());
                }
            );
    }

    signup(event) {
        event.preventDefault();
        this.router.parent.navigateByUrl('/signup');
    }
}

Do you have the same behavior when executing your request with curl? — Thierry Templier, Mar 17 '16 at 21:34
I can make the request using Postman and JQuery without any problems. — whitemtnelf, Mar 18 '16 at 12:56
Okay. Could you add the code you use to execute your request in your Angular2 application? and the content of sent request from dev tools? Thanks! — Thierry Templier, Mar 18 '16 at 12:59
Thanks! I guess it's a problem with `Access-Control-Allow-Headers` (http://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working). Could you also the content of the request executed with jQuery successfully? — Thierry Templier, Mar 18 '16 at 19:37

score 1 · Answer 1 · answered Apr 19 '16 at 13:08

I spent hours looking for a consistent answer to this. Simply putting the following in the section of the web service web.config fixed this for me.

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
    <add name="Access-Control-Allow-Headers" value="Content-Type"/>
  </customHeaders>
</httpProtocol>

score 0 · Answer 2 · answered Mar 23 '16 at 14:59

0

I found this article that clearly states application/json isn't allowed in a CORS request. Thierry thank you for suggesting seeing the jquery request/response because it got me to realize that I was serving the html page from the same server that was handling the request so I wasn't running into the CORS issue. I'll add a virtual directory to map the ng2 project so that it can be served up from the same server that's doing servicing the requests

answered Mar 23 '16 at 14:59

whitemtnelf

181
2
10

It appears that MS Web API provides a layer of CORS control that needs to be specified. This article explains it well - https://msdn.microsoft.com/en-us/magazine/dn532203.aspx – whitemtnelf Mar 28 '16 at 14:59

Angular2 Post application/json

2 Answers2