Angular2 Yelp API CORS错误

Question

实现V3 API时，我的Ionic2 / Angular2应用程序面临以下CORS问题：

XMLHttpRequest无法加载https://api.yelp.com/v3/businesses/search。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，'http://localhost:8100'原产地不允许进入。响应具有HTTP状态代码404。

在使用API​​的V2时，我使用http.jsonp“绕过”CORS问题不再适用了，因为授权承载应该添加到GET请求的标头中（据我所知，一个Jsonp标头无法修改）。

这就是我尝试的原因

private queryYelp(yelpOAuth:YelpCommunication.YelpOAuthSignature, nextTo:AddressLocation.Location):Promise<{}> {

    let params:URLSearchParams = new URLSearchParams();

    params.set('limit', '' + Resources.Constants.Default.YELP.LIMIT);
    params.set('latitude', '' + nextTo.coordinates[0]);
    params.set('longitude', '' + nextTo.coordinates[1]);
    params.set('radius', '' + Resources.Constants.Default.YELP.RADIUS);
    params.set('sort_by', Resources.Constants.Default.YELP.SORT.BEST_MATCHED);

    let headers:Headers = new Headers();
    headers.append('Authorization', 'Bearer ' + yelpOAuth.access_token);
    let options:RequestOptions = new RequestOptions({
        headers: headers,
        search: params,
        withCredentials: true
    });

    return new Promise((resolve, reject) => {
        this.http.get(Resources.Constants.Default.YELP.URL, options)
            .map(res => res.json())
            .subscribe((businesses:Yelp.YelpBusiness[]) => {
                resolve(businesses);
            }, (errorResponse:Response) => {
                reject(errorResponse);
            });
    });
}

要么

private queryYelp(yelpOAuth:YelpCommunication.YelpOAuthSignature, nextTo:AddressLocation.Location):Promise<{}> {
    return new Promise((resolve, reject) => {
        let xhr:XMLHttpRequest = new XMLHttpRequest();

        let formData:FormData = new FormData();
        formData.append('limit', '' + Resources.Constants.Default.YELP.LIMIT);
        formData.append('latitude', '' + nextTo.coordinates[0]);
        formData.append('longitude', '' + nextTo.coordinates[1]);
        formData.append('radius', '' + Resources.Constants.Default.YELP.RADIUS);
        formData.append('sort_by', Resources.Constants.Default.YELP.SORT.BEST_MATCHED);

        xhr.onload = () => {
            console.log("status " + xhr.status);
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status == 201) {
                let businesses:Yelp.YelpBusiness[] = JSON.parse(xhr.responseText);
                resolve(businesses);
            } else {
                reject();
            }
        };

        xhr.onerror = () => {
            alert('Woops, there was an error making the request.');
        };

        xhr.open("GET", Resources.Constants.Default.YELP.URL, true);
        xhr.setRequestHeader("Authorization", 'Bearer ' + yelpOAuth.access_token);
        xhr.send(formData);
    });
}

并且两个解决方案都没有成功，两个解决方案都导致上面列出的CORS错误。

我错过了什么或者如何从Ionic2 / Angular2查询Yelp API v3？

最好的问候

P.S。：请注意，我的OAuth access_token未公开。身份验证由我的后端生成。

UPDATE

在@Thierry Templier回答之后，我找到了一个适用于Ionic2的解决方案。

在浏览器中调试时，我使用代理查询Yelp API V3。因此我添加了ionic.config.json文件

 "proxies": [{
    "path": "/yelp/v3/businesses",
    "proxyUrl": "https://api.yelp.com/v3/businesses"
 }]

并执行如下查询

this.http.get('http://localhost:8100/yelp/v3/businesses/' + 'search', ...

请注意，以下也可以

this.http.get('/yelp/v3/businesses' + 'search', ...

在iOS和Android中运行时，代理不应该使用也不会工作。因此，我在我的服务中执行以下查询

this.http.get('https://api.yelp.com/v3/businesses/search, ...

当然，为了有一些方便的东西，我写了一个gulp任务，允许我在环境之间切换。

但是，此解决方案仅适用于Ionic2。如果我必须在网站的Angular2中实现它，我需要我猜一个代理，不确定它。因此，我在Yelp API V3的问题列表中打开了该任务的副本

https://github.com/Yelp/yelp-api-v3/issues/21

Answer 1

问题不在客户端，因为浏览器将透明地Hamble跨域请求。它会在引擎盖下发送Origin标题。服务器必须在此之后处理CORS：

• 在响应中发回CORS头以启用（或不启用）此类请求。
• 如有必要，处理预检请求。

有关详细信息，请参阅此文章：

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

我查看了v3版本的文档，可以看到关于CORS或JSONP的任何内容。唯一剩下的解决方案是在服务器应用程序中实现代理作为解决方法。我知道这不是理想的，但这是我看到的唯一可能的解决方案