Angular2 Yelp API CORS 错误

Question

在实现 V3 API 时，我的 Ionic2/Angular2 应用程序遇到了以下 CORS 问题：

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

在使用 API 的 V2 时，我使用 http.jsonp 来“绕过”CORS 问题 whish 不再适用，因为授权承载应该添加到 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 未公开。身份验证由我的后端生成。

更新

@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 的任何内容。唯一剩下的解决方案是在您的服务器应用程序中实现代理作为解决方法。我知道这并不理想，但这是我看到的唯一可能的解决方案