Angular2 http.put shows two requests in console? - angularjs

One of the requests is from zone.js and the other is from "other"
saveContact(contact: Contact) {
let body = contact;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.put(`http://localhost:8082/business/${contact.businessId}/contacts/${contact.contactId}`, body, headers)
.map(this.returnSuccess)
.catch(this.handleError);
}
Here is the Network:
Why am I getting two requests when I had only made one?

Related

Cannot generate embed token using access token in power bi

I'm trying to be understand authorization mechanism in power bi API
I would embed a report in my web app.
I have done the steps as mentioned in docs
Actually I would get report embedded url then use power bi JS API to embed the report.
Getting access_token is successful
var options = {
'method': 'POST',
'url': `https://login.microsoftonline.com/${process.env.TENANT_ID}/oauth2/token`,
'headers': {
'Content-Type': 'multipart/form-data'
},
formData: {
'grant_type': process.env.GRANT_TYPE,
'client_id': process.env.CLIENT_ID,
'client_secret': process.env.CLIENT_SECRET,
'resource': "https://analysis.windows.net/powerbi/api",
'Scope': "https://analysis.windows.net/powerbi/api/.default"
}
};
Now I try to get embedded token for report in group
var data = { accessLevel: "View", datasetId: "5b11d62a-803e-46c9-83f3-*****" };
var config = {
method: 'post',
url: `https://api.powerbi.com/v1.0/myorg/groups/${process.env.GROUP_ID}/reports/${process.env.Report_ID}/GenerateToken`,
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${JSON.parse(response).access_token}`
},
data: data
};
let embedtoken
try {
embedtoken = await axios(config)
}
catch (e) {
console.log(e)
}
context.res = {
// status: 200, /* Defaults to 200 */
body: JSON.parse(response).access_token
};
I get error 400 response
But When I generate an embed token for dashboard I get a valid token. But of course that's not working with get report API
My goal is to get report infos. For information I get get that using the access token but it's not safe
For POST API requests, data should be passed in string format. This can be done by using for example, JSON.stringify(data).
Refer below code snippet which should resolve the error.
var config = {
method: 'post',
url: `https://api.powerbi.com/v1.0/myorg/groups/${process.env.GROUP_ID}/reports/${process.env.Report_ID}/GenerateToken`,
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${JSON.parse(response).access_token}`
},
data: JSON.stringify(data) };

Mailchimp api not working with fetch and Reactjs

I cannot get the fetch api to work with the mailchimp api in React. I'm also using webpack to run a devserver.
This is what I have:
componentDidMount() {
let authenticationString = btoa('123:myapikey-us17');
authenticationString = "Basic " + authenticationString;
fetch('https://us17.api.mailchimp.com/3.0/lists/fakelistid/segments', {
mode: 'no-cors',
method: 'GET',
credentials: 'same-origin',
headers: new Headers({
'Authorization': authenticationString,
'Accept': 'application/json',
'Content-Type': 'application/json'
})
}).then(function(e){
console.log("fetch finished")
}).catch(function(e){
console.log("fetch error");
})
}
I've tested the exact same api request in Postman and that works fine.
When I try this in React I keep getting a 401 status code saying "Your request did not include an API key."

Http request in angular send undefine values

** It turns out that the problem was at the server **
I'm trying to excute HTTP post request (from my angular client) to my server (node express). The server recive the request but the data is undefined.
Already tried to make this req by postman and it worked perfect there.
var req = {
method: 'POST',
url: _url +'/login',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: { user: 'someUser', password :'somePass' }
}
$http(req)
.then(function success(res){
...
}, function error(res){
...
});
You are sending JSON data and sending the header of x-www-form-urlencoded.
Change the content type to "application/json"
Like:
headers: {
'Content-Type': 'application/json'
}

react fetch header not set

I am facing a problem. And the solutions that are accepted by the others, those don't work for me./
I have:
return await fetch(url, {
method: httpMethod,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-test':'try me',
},
body: JSON.stringify(bodyObject)
});
But, it seems like no header is set at all.
Cors-header is set, adding mode:'cors' makes no difference.
Am I missing something?
the request:
Accept is empty and Content-Type nor x-test are nowhere to be found.
..
Edit
..
If i need to create new question, do tell me.
New request
So I see that the header is set - thanks to liminal18!-. However, now i want to authorize to an AD.
so now I got:
async callUrl(url, httpMethod, bodyObject) {
try {
var requestObj = {
method: httpMethod,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-test':'try me',
'Authorization': 'Basic Uk11bGxlc....'
}
};
if (bodyObject !== undefined){
requestObj.body = JSON.stringify(bodyObject);
}
return await fetch(url, requestObj);
} catch(error){
console.error(error);
}
}
But still get an 401.
I know this is not the clean solution for logging in, but just testing..
Are you sure the request you captured is the correct request?
if you're using CORS there is an OPTIONS post to get the cors allowed methods before react will post/put which might be what you are looking at and not the actual post or put you intended. Where are the CORS headers set?

What does 'Content-Type': 'application/x-www-form-urlencoded do in http post method

I still don't know how to make a correct http post method in angular 2, I did as they show on their official website.
I have this function createNewPlaylist in my api.service.ts
createNewPlaylist(stDate: string, etDate: string, playlistTitle: string, shortTitle: string): Observable<any> {
/**some code here **//
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(`https://cmsapi-dev.b2c.on.aol.com/v1.0/cms/playlists/${this.g_app}/${this.g_region}?trustedUserId=myuserid`,
JSON.stringify({
name: playlistTitle,
shortName: shortTitle,
}), options);
}
And I have this function in my component
createNewPlaylist(stDate: string, etDate: string, playlistTitle: string, shortTitle: string):any {
this.apiService.createNewPlaylist(stDate, etDate, playlistTitle, shortTitle)
.map(res => console.log(res))
.subscribe(
data => console.log(data),
error => console.log(error)
);
If i use the browser, enter the url directly (https://mydomain/v1.0/cms/playlists/aolon/us?name=asd&shortName=lalalal&method=POST&trustedUserId=myuserid), it will generate correct respond.
But my console get an error when I do it normally,
{"response":{"statusCode":478,"statusText":"Bad argument - name"}}
Any ideas?
Update: I changed my code to this and it works, can someone explain to me?
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
return this.http.post(`https://cmsapi-dev.b2c.on.aol.com/v1.0/cms/playlists/${this.g_app}/${this.g_region}/?trustedUserId=myuserid`,
`name=${playlistTitle}&shortTitle=${shortTitle}`, options )
I think that you need to set correctly the Content-Type header for your POST request:
implicitly (from RC2)
return this.http.post(`https://cmsapi-dev.b2c.on.aol.com/v1.0/cms/playlists/${this.g_app}/${this.g_region}?trustedUserId=myuserid`,
{
name: playlistTitle,
shortName: shortTitle,
});
explicitly
let headers = new Headers();
headers.append('Content-Type', 'application/json'); // <------
return this.http.post(`https://cmsapi-dev.b2c.on.aol.com/v1.0/cms/playlists/${this.g_app}/${this.g_region}?trustedUserId=myuserid`,
JSON.stringify({
name: playlistTitle,
shortName: shortTitle,
}), { headers }); // <-------

Resources