how to send post request using http from @angular/http

Question

I am using following code to send a post request

import { Http, Headers, Response } from '@angular/http';

@Injectable()
export class AuthenticationService {
    private _options = new Headers({'Content-Type': 'application/json'});
    
    constructor(private http: Http) { }

    login(username: string, password: string) {
           return this.http.post('http://localhost:56451/map',
              { "username": username, "password": password },
              this._options);
    }
}

however I am getting following error in vscode

Argument of type '{ headers: HttpHeaders; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types 
 of property 'headers' are incompatible. Type 'HttpHeaders' is not assignable to type 'Headers'. Property 'forEach' 
 is missing in type 'HttpHeaders'.

Please help clarify associated concepts

use Headers from @angular/http instead of HttpHeaders if you are using angular 4 `new Headers({ 'Content-Type': 'application/json' });` — JayDeeEss, Nov 02 '17 at 18:48
Exactly, it removed the error, but I think there is something wrong with my approach or code, since I am getting following response -------> Failed to load http://localhost:56451/map: Response for preflight has invalid HTTP status code 403 — Akshay Vijay Jain, Nov 02 '17 at 18:52
thats another issue, I've seen couple of questions regarding this on SO, search for it you will get an answer for sure! — JayDeeEss, Nov 02 '17 at 18:54
I would imagine you're getting the 403 as you're providing headers in the POST request, so Angular is sending an OPTIONS request first, which your server -side logic isn't set up for. You'd need to enable CORS on the server otherwise you'll get 403/405. — prettyfly, Nov 02 '17 at 18:56
Perhaps informative: discussion from https://stackoverflow.com/questions/44728775/type-headers-has-no-properties-in-common-with-type-requestoptionsargs/44728776?noredirect=1#comment81114325_44728776 — msanford, Nov 02 '17 at 19:01
Please update your question with the findings from the comments above — Wagner Danda da Silva Filho, Nov 02 '17 at 19:07
edited, options is now defined, it was typo introduced while updating question from angular docs — Akshay Vijay Jain, Nov 02 '17 at 19:25

score 3 · Accepted Answer · answered Nov 02 '17 at 19:11

3

You are mixing classes: HttpHeaders goes with HttpClient, which replaces Http since 4.3.

The other comments about 403 are worth investigating, but at a minimum, do this:

import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

@Injectable()
export class AuthenticationService {
    private _options = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };

    // Inject HttpClient, not Http
    constructor(private http: HttpClient) { }

    login(username: string, password: string) {
           return this.http.post('http://localhost:56451/map',
              { username, password },
              this._options);
    }
}

Note that you can use a destructuring assignment in the post body (when your object key name is the same as the variable name you are replacing it with).

answered Nov 02 '17 at 19:11

msanford

11,803
11
66
93

1

Thank you for answer @msanford, I am working on it, will update as I come to solution – Akshay Vijay Jain Nov 02 '17 at 19:22
1

working on it,perhaps this link is relevant here https://stackoverflow.com/questions/33660712/angularjs-post-fails-response-for-preflight-has-invalid-http-status-code-404 – Akshay Vijay Jain Nov 02 '17 at 19:26
when I changed Http to HttpClient, I get following error in console, No provider for HttpClient, Can you please show some light on related concept – Akshay Vijay Jain Nov 02 '17 at 20:54
1

@AkshayVijayJain You need to include `HttpClientModule` in an `@NgModule`'s `imports: []` list. – msanford Nov 03 '17 at 13:12
Absolutely @msanford, so I guess the trick to know the corresponding module name for the component or directive, is to read the corresponding tutorial properly – Akshay Vijay Jain Nov 03 '17 at 18:06
1

Or is there any other way or documentation, to determine which module contains the component we are trying to use – Akshay Vijay Jain Nov 03 '17 at 18:07
@Anuj That's a weird pattern, why do `Observable.create(observer => { this.myhttp.post`? Do like the example. – msanford Apr 09 '18 at 12:34
@Anuj You mean like https://stackoverflow.com/questions/44728775/type-headers-has-no-properties-in-common-with-type-requestoptionsargs/44728776 ? – msanford Apr 09 '18 at 18:56
As for "I'm using it in a service" still, I've never seen anyone create an observer like that. You should very likely just `return this.myhttp.post` – msanford Apr 09 '18 at 18:57
@Anuj This is getting long for a comment thread: *probably ask a new question.* It's hard to understand code in a comment like this. – msanford Apr 09 '18 at 18:57

score 0 · Answer 2 · answered Nov 02 '17 at 20:27

0

My problem was due to CORS, Even though I have enabled CORS chrome plugin, still because I was specifying options, a preflight response was send to server which was rejected

The solution which helped was putting CORS annotation on my rest controller in Java, so probably only server side code can help here

@CrossOrigin(origins = "*")  <------ this solved the issue of post request getting failed
@RestController
public class ProductController {...

answered Nov 02 '17 at 20:27

Akshay Vijay Jain

13,461
8
60
73

I am using angular with asp.net core web api . I have also enabled cors . get request succeeds but post request gives me CORS error access denied. Any idea _ thanks – MindRoasterMir Mar 09 '21 at 07:46

how to send post request using http from @angular/http

2 Answers2

Linked