Angular2 CORS API GET
Я пытаюсь использовать API, предоставляемые Желтыми страницами. Когда я подключаюсь через Почтальон, я получаю верный JSON или XML. Однако, как описано во многих других сообщениях Stackru, при отправке через мое приложение Angular2 браузер возвращает ошибки CORS, что является ожидаемым поведением / результатом.
На основании моего тестирования, показанного ниже, я предполагаю, что на сервере, предоставляющем API, не включены CORS или JsonP.
- Если это так, то как этот API должен использоваться в приложении?
- Почему тестовая версия 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…}