0

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?

ClydeShen
  • 11
  • 3

0 Answers0