Unable to set content-type = application/json angular4 post request
Solution 1
Use Below Code
import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class AuthenticationService {
public token: string;
constructor(private http: Http) {
}
login(username: string, password: string): Observable<boolean> {
// let head = new Headers({ 'Content-Type': 'application/json' });
const headers = new Headers();
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }),options)
.map((response: Response) => {
// login successful if there's a jwt token in the response
let token = response.json() && response.json().token;
console.log(response);
});
}
}
Solution 2
You should be able to use a header in this way:
let headers = new Headers({ 'Content-Type': 'application/json' });
headers.append('Accept', 'application/json');
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }), options)
.map((response: Response) => {
// login successful if there's a jwt token in the response
let token = response.json() && response.json().token;
console.log(response);
});
Alternatively, I believe that if you use the newer HttpClient
from @angular/common/http
, application/json is the default content-type.
E.g. - Firstly import the HttpClientModule:
// app.module.ts:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
// Import HttpClientModule from @angular/common/http
import {HttpClientModule} from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
// Include it under 'imports' in your application module
// after BrowserModule.
HttpClientModule,
],
})
export class MyAppModule {}
Then, in your AuthenticationService:
constructor(private http: HttpClient) {}
login(username: string, password: string): Observable<boolean> {
return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }))
.map((response: Response) => {
// login successful if there's a jwt token in the response
let token = response.json() && response.json().token;
console.log(response);
});
}
Further information is available in the Angular Documentation.
Solution 3
Try this:
import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class AuthenticationService {
public token: string;
constructor(private http: Http) {
}
login(username: string, password: string): Observable<boolean> {
let head = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: head });
return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }),options)
.map((response: Response) => {
// login successful if there's a jwt token in the response
let token = response.json() && response.json().token;
console.log(response);
});
}
}
lazy rabbit
A "Keep it simple" guy who believes that : "simplicity is the ultimate sophistication"
Updated on June 04, 2022Comments
-
lazy rabbit almost 2 years
I am trying to send a post request using angularjs4. Code works fine while it reaches the
login()
function. Note thethis.http.post
function, if I remove the last param i.e. make request look likereturn this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password })
, then the request header on web api becomes :POST /auth HTTP/1.1 Host: localhost:8080 Connection: keep-alive Content-Length: 39 Pragma: no-cache Cache-Control: no-cache Accept: application/json, text/plain, */\* Origin: http://localhost:4200 User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 content-type: text/plain Referer: http://localhost:4200/login Accept-Encoding: gzip, deflate, br Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
Note the
content-type:text/plain
which is set by angularjs by default. So I tried adding{ headers: head}
to change thecontent-type
toapplication/json
which in turns showsInvalid CORS request
as response and turns theRequest Header
to :Accept:*/\* Accept-Encoding:gzip, deflate, sdch, br Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 Access-Control-Request-Headers:content-type Access-Control-Request-Method:POST Cache-Control:no-cache . .
Notice the
Access-Control-Request-Headers:content-type
line, which of course is wrong. Below is the Authorization file which initiates the request:import { Injectable } from '@angular/core'; import { Http, Headers, Response, RequestOptions, RequestMethod } from '@angular/http'; import { Observable } from 'rxjs'; import 'rxjs/add/operator/map' @Injectable() export class AuthenticationService { public token: string; constructor(private http: Http) { } login(username: string, password: string): Observable<boolean> { let head = new Headers({ 'Content-Type': 'application/json' }); return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }),{ headers: head}) .map((response: Response) => { // login successful if there's a jwt token in the response let token = response.json() && response.json().token; console.log(response); }); } }
Please suggest the proper way to change the content type to
application/json
in Request Header in post request via AngularJS 4