Angular2 problems with sending post request

Question

I have a simple code for send post request to my local server. Like this:

  login(event, username, password) {
    event.preventDefault();
    let body = "grant_type=password&username=" + username + "&password=" + password;
    this.http
      .post(`${appSettings.API_ENDPOINT_DEV}Login`, body, {headers: contentHeaders})
      .subscribe(
        response => {
          this.accessToken = response.json().access_token;
          console.log(this.accessToken);
          localStorage.setItem('access_token', this.accessToken);
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );
  }

But I catch next exception in the google chrome dev console.

XMLHttpRequest cannot load http://localhost:1216/api/Login. Response for preflight has invalid HTTP status code 400

Help me please fix this problem because with Angular 1.x all work well. Log from google chrome console:

   Request URL:http://localhost:1216/api/Login
    Request Method:OPTIONS
    Status Code:400 Bad Request
    Remote Address:[::1]:1216
    Access-Control-Allow-Origin:*
    Cache-Control:no-cache
    Content-Length:34
    Content-Type:application/json;charset=UTF-8
    Date:Thu, 04 Aug 2016 11:43:21 GMT
    Expires:-1
    Pragma:no-cache
    Server:Microsoft-IIS/10.0
    X-Powered-By:ASP.NET
    X-SourceFiles:=?UTF-8?B?RDpcU291cmNlc1xHcmFwcHNcVUtfQnJhbmRQcm90ZWN0aW9uXFdlYkFQSVxhcGlcTG9naW4=?=

UPD:

export const contentHeaders = new Headers();
contentHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
contentHeaders.append('Access-Control-Allow-Origin', '*; *');
contentHeaders.append('Access-Control-Allow-Methods', 'POST');

UPD2 Log from advanced REST client

Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json;charset=UTF-8
Expires: -1
Server: Microsoft-IIS/10.0
Access-Control-Allow-Origin: *; *
X-Sourcefiles: =?UTF-8?B?RDpcU291cmNlc1xHcmFwcHNcVUtfQnJhbmRQcm90ZWN0aW9uXFdlYkFQSVxhcGlcTG9naW4=?=
X-Powered-By: ASP.NET
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Date: Thu, 04 Aug 2016 11:59:19 GMT
Content-Length: 316

You need to configure your server properly stackoverflow.com/questions/10143093/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 4, 2016 at 11:45
with Angular 1.x all work well. Pls read my questions again. — Taras Kovalenko
– Taras Kovalenko, Commented Aug 4, 2016 at 11:46
Angular doesn't send an OPTIONS request. This request is created by the browser. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 4, 2016 at 11:51
The headers need to be added by the server to the response to the OPTIONS request. Adding them in Angular is redundant. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 4, 2016 at 11:59

Community · Accepted Answer · 2017-05-23 11:54:13Z

1

You maybe missing another header:

"Access-Control-Allow-Methods", "POST"

Check CORS enabled but response for preflight has invalid HTTP status code 404 when POSTing JSON for details

Update: Maybe more then just this one. Check this answer https://stackoverflow.com/a/37654548/1267942

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Aug 4, 2016 at 11:49

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taras Kovalenko · Accepted Answer · 2016-08-04 12:20:10Z

0

I found problems I had added some config to the Web.config:

<httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="Content-Type" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
            </customHeaders>
        </httpProtocol>

And remove app.UseCors(CorsOptions.AllowAll); from startup.cs class. Thanks a lot, all peoples for spend time for my problem ;)

answered Aug 4, 2016 at 12:20

Taras Kovalenko

2,3933 gold badges27 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular2 problems with sending post request

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related