Angular2 CORS API GET

Question

I am attempting to use the APIs exposed by Yellow Pages. When I connect using Postman I receive back valid JSON or XML. However, as is described in numerous other StackOverflow posts, when submitted via my Angular2 application the browser returns CORS errors which is an expected behavior/result.

Based on my testing shown below, I'm assuming that the server exposing the API doesn't have CORS or JsonP enabled.

1. If that is the case, how is this API supposed to be used in an application?
2. Why does test version 2 return the correct XML and a status code 200 but still fail with an exception? Is there a way for me to prevent the exception so that I can process the XML that I see being returned in the network tab of Chrome DevTools?

Update: I forgot to mention that I also tried appending &callback=JSONP_CALLBACK to my connection string in version 2.

Version 1 (XML):

getDummyData(){
    var headers: Headers= new Headers({  'Accept': 'application/xml', 'Access-Control-Allow-Origin': '*'}); //'Access-Control-Allow-Origin': '*'
    let options = new RequestOptions({ headers: headers });
    return this.http.get('http://api2.yp.com/listings/v1/search?format=xml&searchloc=07054&term=car%20dealer&sort=distance&radius=5&listingcount=10&key=<mykey>', options);
        //.map((response: Response) => response.json())
}

Errors:

* XMLHttpRequest cannot load...Response for preflight is invalid (redirect)
* EXCEPTION: Response with status: 0  for URL: null
* Uncaught: Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}

Returns:

* Nothing

Version 2 (JsonP):

getDummyData(){
    var headers: Headers= new Headers({  'Accept': 'jsonp', 'Access-Control-Allow-Origin': '*'}); //'Access-Control-Allow-Origin': '*'
    let options = new RequestOptions({ headers: headers });
    return this.jsonp.get('http://api2.yp.com/listings/v1/search?format=jsonp&searchloc=07054&term=car%20dealer&sort=distance&radius=5&listingcount=10&key=<mykey>', options);
        //.map((response: Response) => response.json())
}

Errors:

* Uncaught SyntaxError: Unexpected token <
* EXCEPTION: Response with status: 200 Ok for URL:
* Uncaught Response {_body: "JSONP injected script did not invoke callback.", status: 200, ok: true, statusText: "Ok", headers: Headers…}

Returns:

* Requested data but in XML format

Version 3 (Json):

getDummyData(){
    var headers: Headers= new Headers({  'Accept': 'application/json', 'Access-Control-Allow-Origin': '*'}); //'Access-Control-Allow-Origin': '*'
    let options = new RequestOptions({ headers: headers });
    return this.http.get('http://api2.yp.com/listings/v1/search?format=json&searchloc=07054&term=car%20dealer&sort=distance&radius=5&listingcount=10&key=<mykey>', options);
        //.map((response: Response) => response.json())
}

Errors:

* XMLHttpRequest cannot load...Response for preflight is invalid (redirect)
* EXCEPTION: Response with status: 0  for URL: null
* Uncaught: Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}

Returns:

* Nothing

Version 4 (Json without CORS Header):

getDummyData(){
    var headers: Headers= new Headers({  'Accept': 'application/json'}); //'Access-Control-Allow-Origin': '*'
    let options = new RequestOptions({ headers: headers });
    return this.http.get('http://api2.yp.com/listings/v1/search?format=json&searchloc=07054&term=car%20dealer&sort=distance&radius=5&listingcount=10&key=<mykey>', options);
        //.map((response: Response) => response.json())
}

Errors:

* XMLHttpRequest cannot load...Redirect from...to...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access
* EXCEPTION: Response with status: 0  for URL: null
* Uncaught: Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}