Angular2 Yelp错误

Question

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

XMLHttpRequest无法加载https://api.yelp.com/v3/businesses/search。对飞行前请求的响应不会通过访问控制检查:请求的资源上没有“访问-控制-允许-原产地”标题。因此，“http://localhost:8100”源是不允许访问的。响应具有HTTP状态代码404。

在使用API的V2时，我使用http.jsonp whish“绕过”了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 Ionic2？

Thx最好的问候

请注意，我的OAuth access_token没有暴露。身份验证由我的后端生成。

更新

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

在浏览器中调试时，我使用代理查询Yelp 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, ...

当然，为了方便起见，我编写了一个任务，它允许我在环境之间切换。

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

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

Answer 1

这个问题不在客户端，因为浏览器将透明地执行跨域请求。它将在遮罩下发送Origin头。服务器必须按照以下操作处理CORS：

• 将CORS头发送回响应中，以启用(或不启用)此类请求。
• 必要时处理预先准备好的请求。

有关更多详细信息，请参阅本文：

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

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