1

I'm trying to connect my Angular app to the Bluemix QA API. So I have this code.

$http({
        method: 'POST',
        url: 'https://gateway.watsonplatform.net/question-and-answer-beta/api/v1/question/healthcare',
        headers: {
            'Content-Type': 'application/json',
            'Authorization':'Basic mytoken',
            'X-SyncTimeout': 30
        },
        data: {
            'question': {
                'questionText': 'Malaria?'
            }
        }
    }).then(function(response){
        $scope.response = JSON.stringify(response);
    });

Also I have this on my app.js

.config([
'$routeProvider',
'$httpProvider',
function($routeProvider, $httpProvider){
    $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
    $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';

}])

But I'm getting this error when I try to run the method:

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.

And if I try to remove the header it'll give me a problem in another header. So, any ideas? Or any ajax example? I know there's a few nodejs examples, but I want to know if it's possible to connect directly to the api.

1 Answers1

1

You are getting this because you are trying to perform cross site scripting. Watson does not support this. You will need to proxy the request to your backend of your app and then have your app funnel the request to Watson.

For example here is an app that works with Personality Insights that funnels the request from Angular to the backend and then to Watson.

Jeff Sloyer
  • 4,899
  • 1
  • 24
  • 48
  • Postman is a browser plugin for Chrome and allows you to make REST requests. However if you want to make REST requests from a web browser in HTML and Javascript you need to proxy those requests. Please check out https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for more information. – Jeff Sloyer Aug 24 '15 at 17:31