Angular2 Yelp的API CORS錯誤

儘管實現了V3 API我面臨以下CORS問題，我Ionic2/Angular2應用：Angular2 Yelp的API CORS錯誤

的XMLHttpRequest無法加載https://api.yelp.com/v3/businesses/search。對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在「訪問控制 - 允許來源」標頭。因此不允許訪問原產地'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？

THX 問候

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運行查詢，該代理不應該使用aka不會工作。爲此我做了類似的查詢按照我的服務

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

當然，有一些方便，我寫了一個大口的任務，讓我環境之間進行切換。

但是，此解決方案僅適用於Ionic2。如果我不得不在Angular2的網站中實現它，我需要我也是一個代理，不確定它。爲此我在Yelp的API的問題清單打開的副本任務V3

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

來源

2016-07-26 David Dal Busco

問題不在於以來，瀏覽器會透明地漢布爾跨域請求的客戶端。它會在發送引擎蓋下發送Origin標題。服務器必須按如下方式處理CORS：

將CORS頭返回到響應中以啓用（或不）此類請求。
如有必要，處理預檢查的請求。

請參閱本文的詳細信息：

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

我有看的V3版本的文檔，可以看到什麼關於CORS或JSONP。剩下的唯一解決方案是在服務器應用程序中實施代理作爲解決方法。我知道這不是理想的，但它是我看到的唯一可能的解決方案

來源

2016-07-26 21:52:22

Thx爲您的答案蒂埃裏，很高興知道問題不在我的鍵盤和我的屏幕之間。我使用離子代理更新了我的帖子，並提供了一些解決方案。我標記你的答案已解決。留言Merci。 –

Angular2 Yelp的API CORS錯誤

回答

相關問題