Angular 5 GET REST Api с авторизацией возвратных распорок 500 Внутренняя ошибка (от клиента)

Question

Я использую API анализатора тона от инструментов IBM Watson. Как проверяет почтальон, он работает нормально, но в Angular возвращает ошибку 500. Как тональный анализатор API, он требует авторизации, которую я помещаю учетные данные в заголовки.

Вот пример моего кода.

service.ts:

const TONE_API = "https://gateway.watsonplatform.net/tone-analyzer/api/v3/tone?version=2017-09-21&text=";

const httpOptions = {
  headers: new Headers({
    'Content-Type':  'application/json',
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
    'Authorization': 'Basic ************************:************'
  })
};
const options: RequestOptionsArgs = new RequestOptions();
options.headers = httpOptions.headers;

@Injectable()
export class ToneAnalyserService {

  constructor(private http: Http) { }

  // API: GET /message
  getAnalyser(message:string) {
    let url = TONE_API + message;
    return this.http.get(url, options)
      .map(res => res.json())
      .catch(err=>{
        throw(err);
      });
  } 

component.ts:

 this.message = "I like this idea!"; 
   this.toneAnalyser.getAnalyser(this.message).subscribe(res =>{
     this.result = res;
       console.log(res.json());
      }, err => {
        console.log(err);
      });

Answer 1

Вы не можете делать прямые звонки watsonplatform из приложения браузера из-за CORS. watsonplatform не поддерживает эту политику.

Вы должны создать свой собственный бэкэнд-сервис, который будет прокси-сервер ваших запросов.

ИЛИ ЖЕ:

Для локальной разработки вы можете создать псевдоним proxy.config.js:

module.exports = {
  '/watsonplatform': {
    target: 'https://gateway.watsonplatform.net/',
    secure: false,
    changeOrigin: true
  },
};

и звонить из приложения, как get('/watsonplatform/tone-analyzer/api/v3/tone?version=2017-09-21&text=')

Когда вы будете размещать свое приложение, используйте псевдонимы nginx, чтобы сделать то же самое.

Answer 2

Я настроил прокси и настроил Api, как вы сказали. Тем временем я отредактировал код и попытался вызвать маршрут, но он возвращает URL 404, не найденный в консоли.

GET http://localhost:4200/watsonplatform/tone-analyzer/api/v3/tone?version=2017-09-21&text=I%27m%20happy 404 (Not Found)

Образец ниже:

baseUrl ="/watsonplatform/tone-analyzer/api/v3/tone?version=2017-09-21&text=";

  constructor(private accountService: AccountService, private toneAnalyser: ToneAnalyserService,
  private http:HttpClient) { }

  ngOnInit() {

    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Basic fc52487b-f8e5-4948-a11c-43901c0b6a0d:NsP8HyWsoLw8',
        'Access-Control-Allow-Origin':'*',
        'Access-Control-Allow-Headers':'Origin, X-Requested-With, Content-Type, Accept, Authorization',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS'       
      })
    };

    this.http.get(this.baseUrl+"I'm happy",options).subscribe(data=> {
      console.log(data);
    });
}