I am a beginner of Anuglar2. I don't understand how to call remote rest api using http or jsonp in Angular2.
The URI I'm trying to call is
https://securedomain:8081/api/Authentication/AuthenticationQuery?strUserName={username}&strPassword={password}&dtLocal={timestamp}&bIsImpersonating=false&strTargetServerUri={TargetURI}&strDefaultCustomerDatabase={dbname}&strVersion=Angular2%201.0.0.0&strOriginatingPlatform=Angular2&strDeviceID={deviceID}
It can open in browser to check the result, it shows in XML format
<AuthenticationResult xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/Test.WebAPI.Models">
<CustomerServerIPAddr/>
<ErrorMessage>null</ErrorMessage>
<ForceChangePassword>true</ForceChangePassword>
<PasswordRaw/>
<SessionID>00000000-0000-0000-0000-000000000000</SessionID>
</AuthenticationResult>
I am trying to use http to call the API
let header = new Headers()
header = new Headers();
header.append('Content-Type', 'application/json');
header.append('Access-Control-Allow-Credentials', 'true');
header.append('Access-Control-Allow-Origin', '*');
this.http.get(fullURI, {header: header})
.map(res => res.json() )
.catch(this.handleError)
.subscribe(function (res) {
console.log(res)
}
);
But I got error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I check the network header: request:
Request Method:GET
Status Code:200 OK
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:securedomain:8081
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
But no data in response
When I use jsonp to call the API
this.jsonp.get(fullURI)
.map(res => res.json())
.catch(this.handleError)
.subscribe(function (res) {
console.log(res)
}
);
I got error:
Uncaught SyntaxError: Unexpected token : AuthenticationQuery?strUserName=test&strPassword=123&dtLocal=2016-05-30 09:45:36&bIsImpersonating=false&st…:1
I check the network header: request:
Request Method:GET
Status Code:200 OK
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:Host:securedomain:8081
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
But the different is there are some data in resopnse
{"CustomerServerIPAddr":"","PasswordRaw":"","SessionID":"00000000-0000-0000-0000-000000000000","ErrorMessage":"null","ForceChangePassword":true,"CustomerDatabase":""}
I guess I should use JSONP to call the API, but I don't know why it shows error when I subscribe the data.
I found some problems about "jsonp callback", they said the response format shoud be like call_back({data:data}) in jsonp. But I don't have permission to change the API to warp the data like that.
Please help me to understand how I get data from remote API in Angular2?