1

我正在尝试使用Yellow Pages 公开的 API。当我使用 Postman 连接时，我会收到有效的 JSON 或 XML。但是，正如许多其他 StackOverflow 帖子中所述，当通过我的 Angular2 应用程序提交时，浏览器会返回 CORS 错误，这是预期的行为/结果。

根据下面显示的测试，我假设公开 API 的服务器没有启用 CORS 或 JsonP。

  1. 如果是这样，这个 API 应该如何在应用程序中使用？
  2. 为什么测试版本 2 返回正确的 XML 和状态代码 200 但仍然失败并出现异常？有没有办法让我防止异常，以便我可以处理我看到在 Chrome DevTools 的网络选项卡中返回的 XML？

更新：我忘了提到我还尝试&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（没有 CORS 标头的 Json）：

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

0 回答 0