Angular2 Yelp API CORS ошибка

Question

При реализации V3 API я сталкиваюсь со следующей проблемой CORS с моим приложением Ionic2/Angular2:

XMLHttpRequest не может загрузить https://api.yelp.com/v3/businesses/search. Ответ на запрос перед полетом не проходит проверку контроля доступа. Нет заголовка «Access-Control-Allow-Origin» на запрошенном ресурсе. Origin 'http://localhost:8100', следовательно, не допускается. В ответе был код статуса HTTP 404.

При использовании V2 API я был «обход» проблемы CORS с использованием http.jsonp, который больше не применим, поскольку носитель полномочий должен быть добавлен в заголовок запрос 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, перечисленной выше.

Я пропустил что-то или как я могу запросить API Yelp v3 от Ionic2/Angular2?

Thx С наилучшими пожеланиями

P.S .: Обратите внимание, что мой OAuth access_token не подвергается. Аутентификация генерируется моим бэкэнд.

UPDATE

После @Thierry TEMPLIER ответ я нашел решение, которое работает для Ionic2.

При отладке в браузере я запрашиваю Yelp API V3 с помощью прокси. Therefor добавить в 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', ... 

При работе в прошивке и Android, прокси не следует использовать, иначе не сработает. Therefor я сделать запрос как следующий в моей службе

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

Конечно, иметь что-то под рукой, я пишу Глоток задачу, которая позволит мне переключаться между средами.

Но это решение применимо только к Ionic2. Если бы мне пришлось реализовать его в Angular2 на веб-сайте, мне бы, наверное, тоже нужен прокси-сервер, не уверен в этом. Therefor я открыл копию этой задачи в списке вопросов по API Yelp 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. Единственным оставшимся решением является внедрение прокси-сервера в приложении-сервере в качестве обходного пути. Я знаю, что это не идеально, но это единственное возможное решение, которое я вижу.