Can't access IBM Watson API locally due to COR

Question

There doesn't seem to be a lot of answers (but lots of questions) out there on how to handle this, so I'm going to add my name to the chorus and pray for an answer that doesn't involve Node.

My error via Chrome console:

1. POST https://gateway.watsonplatform.net/visual-recognition-beta/api 
2. XMLHttpRequest cannot load https://gateway.watsonplatform.net/visual-recognition-beta/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401.

I'm using a Rails AJAX request as such:

$.ajax({
         method: "POST",
         version: 'v2-beta',
         url: "https://gateway.watsonplatform.net/visual-recognition-beta/api",
         password: "-----------",
         username: "-----------",
         version_date:'2015-12-02',
         visual_recognition: [
             {
             name: "visual-recognition-service",
             label: "visual_recognition",
             plan: "free",
             credentials: {
                 url: "https://gateway.watsonplatform.net/visual-recognition-beta/api",
                 password: "----------",
                 username: "---------"
               }
             }
           ],
         image: "/images/image1.jpg",
         contentType: 'application/json'
         }).done(function(msg){
         if (200) {
           console.log("This is a test for if.")
         } else {
           console.log("This is a test for else.")
         }
       });

For this particular prototype app, I have Rack::Cors set up to let anything work. This is in my application.rb:

config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*',
        :headers => :any,
        :methods => [:get, :post, :delete, :put, :patch, :options, :head],
        :expose  => ['access-token', 'expiry', 'token-type', 'uid', 'client', 'auth-token'],
        :max_age => 0
      end
end

Is there anyone out there that knows how these things are to be configured to get around this? I have to assume there's a way to access these APIs without having to fire up a Node instance.

Answer 1

It would be a bad idea to put your Watson API keys in the browser as someone could then take those keys, use them in another app, and you would pay for their access. You need to invoke the APIs from an authenticated server side application.

Answer 2

The following services support CORS:

• Tone Analyzer
• Speech to Text
• Text to Speech
• Personality Insights
• Conversation

The following services do not support CORS

• Language Translator
• Visual Recognition (partial support)
• Natural Language Understanding

We are working on adding support for the remaining services.

As @brian-martin suggested, you should not use your credentials in the browser. Something you can do is to get a token using the authorization service and then use that token instead of username and password. Take a look at this tutorial on how to use tokens

UPDATE 04/07: Added list of services that support CORS(Thanks to Nathan) UPDATE 07/10: Removed deprecated services