Angular post gives back weird data - http

Im doing this:
let headers = new Headers({
'Content-Type': 'application/json',
'Content-Encoding': 'deflate'
});
let options = new RequestOptions({ headers: headers });
let body = JSON.stringify({
"password": password,
"username": username
});
return this.http.post('URL HERE', body, headers).map((res: Response) => res.text());
but it returns something like this:
��V���0���C�`Y�F��Z��J��2�%n�l�f[��k�- I�f�M}�F̘y3o<�������J��-SYV�]�#i�,[���T���3�?�/fv��V$��ʈl�Ŀ��2?<�'B5� V��`��&kA !�F݌C�VJ�㍻�,/�+�fKw�S���%�Ѓ|�QJ>}�9�7fz���9zL�M�Gt�!�#?:�6��?�fH�k̄���Q(����z�7��U�r2�7��g2�[�
When I do the call from Postman, no issues.
Any tips ?


this.http.post('URL HERE', body, headers) should have been this.http.post('URL HERE', body, options)
stupidme

Related

Fetch: Can you pass parameters to the server

I'm using a basic fetch to obtain data from an express server that queries the data from a database. So I want to do a login system, i want to send the user/password from the input fields with the fetch request. so i can perform the logical check to see if password matches the data in the server. and respond with the result.
Is it possible to do a fetch that can pass parameters?
Updated Code Below:
let fetchData = {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.state.user,
password: this.state.password
})
}
var fromServer = fetch('http://localhost:3000/', fetchData)
.then(function(response){
if( !response.ok){
throw Error (response.statusText);
}
return response.json();
})
.then(function(response) {
console.log(response);
})
.catch(error => console.log("there was an error --> " + error));
Express function
app.post('/', function(req, res){
var uname = req.body.username;
var pw = req.body.password;
console.log(uname);
console.log(pw);
});

Of course you can!
Here is an example of Fetch using a POST request:
fetch("http://example.com/api/endpoint/", {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
//make sure to serialize your JSON body
body: JSON.stringify({
name: myName,
password: myPassword
})
})
.then( (response) => {
//do something awesome that makes the world a better place
});
I've answered this question before, check this for more details:
POST Request with Fetch API?
To process the request in Express, as mentioned in your comment assuming your express server is setup to parse body requests, you can do this:
app.post('/your/route', function(req, res) {
var name= req.body.name;
var password = req.body.password;
// ...do your bidding with this data
});

Angular and Asp.net Web Api 2 token

I am working with authentication using Angular and .Net Web API 2 back end. My registration route, and other resources are working, however the login/token is not.
In postman, this request works and I get the token back:
In angular my code looks like the following:
credentials.grant_type = "password";
credentials.userName = "email#email.com";
credentials.password = "asdfasdf";
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlenconded' });
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:58352/Token', credentials, options).map((response: Response) => {
return response.json();
});
However, I get the response:
{"error":"unsupported_grant_type"}
In Angular.js (or Angular 1) I used transformRequest to get it working.

This did the trick!
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('userName', 'email#email.com');
urlSearchParams.append('password', 'asdfasdf');
urlSearchParams.append('grant_type', 'password');
let body = urlSearchParams.toString()
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlenconded' });
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:58352/Token', body, options).map((response: Response) => {
return response.json();
});

Ionic 2 HTTP Request Post not working

I am trying to post data to my server, but I get a 400 Error when executing. The same request works when using get. (the post request is used for a post function and I tried the get request with a get function so that is not an issue)
This is my code:
var json =
{
"test":"asdf"
}
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post("http://192.168.0.103:3000/testPost",json,headers)
.subscribe(data => {
console.log(data);
},
data =>{
console.log(data);
});

How to handle error if API is down in Angular2 (ERR_CONNECTION_REFUSED)?

My catch error method is not catching error if server is down.
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.PATH + '/signup', details, options)
.map(res => res.json())
.catch(res => Observable.throw(res['_body']));

req.body is empty when when header is { 'Authorization': 'Bearer ' + token }

I am using Angular 2 as front end. I tried to send an Object { test: 'Hi' }.
When my http header is like this:
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
I can get the content I sent on the server side using req.body.
However, when my http header is like this:
let headers = new Headers({ 'Authorization': 'Bearer ' + token });
let options = new RequestOptions({ headers: headers });
When I use req.body again, I got an empty Object {}.
My server is using Express.js, and my bodyParser is like this:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
How can I do it correctly? Thanks

You should send both headers to express:
let headers = new Headers({
'Content-Type': 'application/json',
'Authorization': 'Bearer ....'
});

Resources