Angular 5 GET REST Api with Authorization return stuts 500 Internal Error (from client)

Question

I'm consuming tone analyser api from IBM Watson tools. As testing it by postman it's working fine, but in Angular it return error as 500 status. As tone analyser api it requires authorization which I put credentials into headers.

Here is sample of my code.

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

You can't do direct calls to watsonplatform from browser application due to CORS. watsonplatform doesn't support that policy.

You have to create your own backend service, which will proxy your requests.

OR:

For local development you can create proxy.config.js alias:

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

and make calls from application like get('/watsonplatform/tone-analyzer/api/v3/tone?version=2017-09-21&text=')

When you will host your application use nginx aliases to do the same thing.

Answer 2

I did config the proxy and set Api like you said. Meanwhile, I edited the code and tried to call the route but it returns url 404 not found in the console.

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

The sample is below:

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);
    });
}