如何从javascript调用IBM Watson服务 [英] how to call IBM Watson services from javascript

问题描述

我正在使用IBM Watson服务实现虚拟代理。我的应用程序是使用Jquery开发的，Angular JS& Java.Currently我从中间层调用java的watson服务。但我想避免这种情况，直接从javascript调用。当我使用XML Http请求从javascript调用时，我收到CORS错误。如何解决这个问题？

I am implementing a virtual agent using IBM Watson services. My application is developed using Jquery, Angular JS & Java.Currently i am calling the watson services from middle layer that is java. But i want to avoid that and call directly from javascript.When i call from javascript using XML Http request, i am getting CORS error.How to solve this?

下面是我的代码：

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"');

推荐答案

IBM Watson服务尚不支持交叉来自基于浏览器的应用程序的-origin请求。

The IBM Watson services don’t yet support getting cross-origin requests from browser-based apps.

请参阅由于Rails / AJAX应用程序上的CORS，无法在本地访问IBM Watson API ：

我们不支持CORS，我们正在努力，但在你的情况下，目前还不支持Visual Recognition。

We don't support CORS, we are working on it but in your case Visual Recognition is not supported yet.

这意味着有些服务支持CORS，但我想你尝试过的服务不是其中之一。

That implies some of the services support CORS but I guess the one you’ve tried isn’t one of them.

除了你现在所说的（从服务器端Java层访问服务）之外，你从Web应用程序运行的JavaScript代码获取服务的唯一选择是：使用 https://github.com/Rob--W/cors-anywhere 等，或通过开放的CORS代理发送您的请求，如 https://cors-anywhere.herokuapp.com/ （尽管如果您的请求包括在内，您不太可能希望这样做您不希望向第三方代理服务的运营商公开的任何类型的身份验证令牌。

So other than what you say you’re doing now (accessing the services from your server-side Java layer instead), your only option to get at the services from JavaScript code running in a web app is, either set up your own server-side proxy with https://github.com/Rob--W/cors-anywhere or such, or send your requests through an open CORS proxy like https://cors-anywhere.herokuapp.com/ (though it’s unlikely you’ll want to do that in the case where your requests include any kind of authentication token that you don’t want to expose to the operator of a third-party proxy service).

此类代理的工作方式是，而不是使用 https://gateway.watsonplatform.net/some/api 作为您指定的请求网址客户端JavaScript代码，您可以指定代理URL，例如 https://cors-anywhere.herokuapp.com/https://gateway.watsonplatform.net/some/api ，代理将实际请求发送给服务，返回赞助，并将所需的 Access-Control-Allow-Origin 响应标题和其他标题添加到其中并传递它。

The way such proxies works is, instead of using https://gateway.watsonplatform.net/some/api as the request URL that specify in your client-side JavaScript code, you instead specify the proxy URL, like https://cors-anywhere.herokuapp.com/https://gateway.watsonplatform.net/some/api, and the proxy sends the actual request to the service, gets back the response, and adds the needed Access-Control-Allow-Origin response header and other headers to it and passes it on.

因此，包含CORS标头的响应是浏览器所看到的。

So that response with the CORS headers included is what the browser sees.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有关于CORS如何工作的更多细节，但是要知道的主要是浏览器是CORS执行点。因此，对于Watson服务，浏览器实际上将从Watson API获得响应 - 您将能够在浏览器中使用devtools查看响应 - 但浏览器将向客户端JavaScript代码公开响应仅当响应包含 Access-Control-Allow-Origin 响应标头时，才表明发送响应的服务器已选择接收来自客户端JavaScript的跨源请求在网络应用程序中运行。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details about how CORS works, but the main thing to know is that the browser is the CORS enforcement point. So in the case with the Watson services, the browser will actually get the response from the Watson API—you will be able to use devtools in the browser to see the response—but the browser will expose the response to your client-side JavaScript code only if the response includes the Access-Control-Allow-Origin response header to indicate the server that sent the response has opted in to receiving cross-origin requests from client-side JavaScript running in web apps.

这就是为什么，无论如何，所有 xhr.setRequestHeader（Access-Control-Allow - 上面的XHR代码段中的行只需要删除 - 因为 Access-Control-Allow - * 标题是响应标题，而不是请求标头;在请求中将它们发送到服务器对CORS没有影响，因为如上所述，浏览器是CORS执行点，而不是服务器。

So that’s why, regardless, all the xhr.setRequestHeader("Access-Control-Allow- lines in your XHR code snippet above need to just be removed—because Access-Control-Allow-* headers are response headers, not request headers; sending them in a request to a server has no effect on CORS, because as noted above, the browser’s the CORS enforcement point, not the server.

所以它不是服务器收到来自兄弟的请求的情况wser并说，好的，我看到这个请求有正确的标题，所以我会允许它。相反，服务器允许来自浏览器的所有请求，就像它允许来自非Java浏览器工具的所有请求一样，例如Java代码或curl或Postman等等（只要它们当然经过身份验证）并发送响应。

So it’s not the case that the server receives some request from a browser and says, OK I see this request has the right headers, so I’ll allow it. Instead the server allows all requests from browsers, just as it allows all requests from non-browser tools like your Java code or curl or Postman or whatever (as long as they are authenticated of course) and sends a response.

不同之处在于，当非基于浏览器的应用收到回复时，如果缺少 Access-Control，它不会拒绝让您访问该回复-Allow-Origin 标题。但是浏览器确实拒绝让你的客户端JavaScript网络应用程序代码访问响应，如果它没有。

The difference is, when a non-browser-based app receives a response, it doesn’t refuse to let you access the response if it lacks the Access-Control-Allow-Origin header. But the browser does refuse to let your client-side JavaScript web-app code access the response if it lacks that.

这篇关于如何从javascript调用IBM Watson服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！