4

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

Improve this question
10
  • 1
    use Headers from @angular/http instead of HttpHeaders if you are using angular 4 new Headers({ 'Content-Type': 'application/json' }); Commented Nov 2, 2017 at 18:48
  • 1
    thats another issue, I've seen couple of questions regarding this on SO, search for it you will get an answer for sure! Commented Nov 2, 2017 at 18:54
  • 3
    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. Commented Nov 2, 2017 at 18:56
  • 1
    Please update your question with the findings from the comments above Commented Nov 2, 2017 at 19:07
  • 1
    where is this.options defined? Commented Nov 2, 2017 at 19:23

2 Answers 2

Reset to default
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).

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

10 Comments

Thank you for answer @msanford, I am working on it, will update as I come to solution
working on it,perhaps this link is relevant here stackoverflow.com/questions/33660712/…
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
@AkshayVijayJain You need to include HttpClientModule in an @NgModule's imports: [] list.
Or is there any other way or documentation, to determine which module contains the component we are trying to use
|
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 {...
Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.