Angular2 CORS API GET

Я пытаюсь использовать API, предоставляемые Желтыми страницами. Когда я подключаюсь через Почтальон, я получаю верный JSON или XML. Однако, как описано во многих других сообщениях Stackru, при отправке через мое приложение Angular2 браузер возвращает ошибки CORS, что является ожидаемым поведением / результатом.

На основании моего тестирования, показанного ниже, я предполагаю, что на сервере, предоставляющем API, не включены CORS или JsonP.

  1. Если это так, то как этот API должен использоваться в приложении?
  2. Почему тестовая версия 2 возвращает правильный XML-код и код состояния 200, но все равно не работает с исключением? Есть ли способ предотвратить исключение, чтобы я мог обработать XML, который, как я вижу, возвращается на вкладке сети Chrome DevTools?

Обновление: я забыл упомянуть, что я также пытался добавить &callback=JSONP_CALLBACK к моей строке подключения в версии 2.

Версия 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())
}

Ошибки:

* 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…}

Возвращает:

* Nothing

Версия 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())
}

Ошибки:

* 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…}

Возвращает:

* Requested data but in XML format

Версия 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())
}

Ошибки:

* 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…}

Возвращает:

* Nothing

Версия 4 (Json без заголовка CORS):

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())
}

Ошибки:

* 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…}

0 ответов

Другие вопросы по тегам