javascriptからIBM Watsonサービスを呼び出す方法

Question

IBM Watsonサービスを使用して仮想エージェントを実装しています。私のアプリケーションは、Jquery、Angular JS & Javaを使用して開発されています。現在、私はJavaである中間層からwatsonサービスを呼び出しています。しかし、私はそれを避け、javascriptから直接呼び出したいと思います.JavaScriptからXML HTTPリクエストを使用して呼び出すと、CORSエラーが発生します。これを解決する方法は？以下は

は私のコードです：

var username = "uid"; 
var password = "pwd"; 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'url'); 
//xhr.withCredentials = true; 
xhr.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Origin,Content-Type, application/json, Authorization"); 
xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); 
xhr.setRequestHeader('Access-Control-Allow-Credentials', '*'); 
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
xhr.setRequestHeader('Content-Type', undefined); 
xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + " " + password)); 
xhr.send('"query":"hi"'); 

Answer 1

はワトソンの質問を使用してIBM developerWorksのこのチュートリアルを見て、サービスを回答 - http://www.ibm.com/developerworks/cloud/library/cl-watson-qaapi-app/index.html#N10229

Answer 2

IBMワトソンサービスはまだクロスを取得してサポートしていません。ブラウザベースのアプリケーションからのリクエスト

がCan't access IBM Watson API locally due to CORS on a Rails/AJAX Appで答えを参照してください：

私たちは、CORSをサポートしていない、我々はそれに取り組んでいるが、あなたの場合には視覚認識はまだサポートされていません。

これはサービスの一部がCORSをサポートしていることを意味しますが、私が試したのはCORSの1つではないと思います。

あなたが今行っている（サーバー側のJavaレイヤーからサービスにアクセスする）以外に、Webアプリケーションで実行されているJavaScriptコードからサービスにアクセスする唯一のオプションは、あなた自身のサーバー側プロキシをhttps://github.com/Rob--W/cors-anywhereなどと置き換えたり、https://cors-anywhere.herokuapp.com/のようなオープンCORSプロキシを使ってリクエストを送信してください（あなたのリクエストには、そうでないものがあればサードパーティのプロキシサービスのオペレータに公開したい）。

クライアント側のJavaScriptコードで指定するリクエストURLにhttps://gateway.watsonplatform.net/some/apiを使用する代わりに、プロキシURLをhttps://cors-anywhere.herokuapp.com/https://gateway.watsonplatform.net/some/apiのように指定し、プロキシが実際のリクエストをサービスに送信し、応答を取得し、必要な応答ヘッダーとその他のヘッダーを追加して渡します。

CORSヘッダーを含む応答がブラウザに表示されるようにします。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS CORSの動作の詳細については、ブラウザがCORSの強制ポイントであることが重要です。したがって、Watsonサービスの場合、ブラウザは実際にWatson APIからの応答を取得します。ブラウザでdevtoolsを使用して応答を表示できますが、ブラウザはクライアント側のJavaScriptコードに応答を公開します応答にAccess-Control-Allow-Origin応答ヘッダーが含まれていて、応答を送信したサーバーが、Webアプリケーションで実行されているクライアント側JavaScriptからのクロスオリジン要求を受信することを選択した場合に限ります。

だからそれはただ削除-ためであるとAccess-Control-Allow-*ヘッダーが応答ヘッダあり、ヘッダを要求していない必要性上記のあなたのXHRコードスニペットでは、なぜ、かかわらず、すべてのxhr.setRequestHeader("Access-Control-Allow-ラインです。上記のように、ブラウザはサーバではなくCORSの実施ポイントであるため、リクエストをサーバに送信することはCORSには影響しません。

サーバーがブラウザから何らかのリクエストを受信したとは言えませんが、このリクエストには正しいヘッダーがあることがわかりましたので、許可します。代わりに、サーバーはブラウザからのすべての要求を許可します.Javaコードやカールや郵便配達員などのブラウザ以外のツールからのリクエストも許可されています（もちろん、それらが認証されている限り）。

違いは、ブラウザベースではないアプリケーションが応答を受け取ったときに、Access-Control-Allow-Originヘッダーがない場合、応答にアクセスすることを拒否しません。しかし、ブラウザでは、クライアント側のJavaScriptウェブアプリケーションコードがそれを欠いている場合に応答にアクセスすることを拒否します。

Answer 3

また、GitHubで利用可能なWatson SDK'sの一部を見ることもできます。

Answer 4

一部のWatsonサービスはCORSをサポートしていますが、それ以外のサービスはサポートしていません。ただし、CORS経由でアクセスする場合は、ユーザ名とパスワードの組み合わせではなく、認証トークンを使用する必要があります。

これは、サービス・サポート・CORSの部分的なリストである：ここではhttps://github.com/watson-developer-cloud/node-sdk/tree/master/examples/webpack#important-notes

は、Node.jsのSDKを使用した例のカップルです：

• のWebPACK：https://github.com/watson-developer-cloud/node-sdk/tree/master/examples/webpack
• Browserify：https://github.com/watson-developer-cloud/node-sdk/tree/master/examples/browserify

また、Speech JavaScript SDKを使用した多くの例があります。

• https://watson-speech.mybluemix.net/

* APIキーではなく、ユーザー名/パスワードの組み合わせを使用するサービスがいくつかあります。この場合、サービスがCORSをサポートしている場合は、クライアントサイドコードからAPIキーを直接使用することができます。