ぺんぎんらぼ

お笑いとマンガ好きなしょぼしょぼWeb系エンジニアの日記です

*

クロスドメインに関する誤解

      2016/04/06

Bluemix上に作ったWebサイトから、
WebサービスであるWatsonAPIをAjax呼び出ししようとしてハマり、
自分がクロスドメインについて間違って理解していたことに気づきました。

誤った理解はこちら。

ドメインAのリソースであるJavaScriptから、ドメインBのWebサービスを呼び出すと、
「異なるドメインへのスクリプトによるアクセス=クロスドメイン」となり、
ドメインBにはアクセスできない。
# ブラウザには以下のような”Access-Control-Arrow-Origin”のログが出力される。
crossdomainError
JavaScriptの仕様はこのようになっているので、
Webサービス側の設定を工夫(CORSを設定)してあげたり、
フロント側を工夫(jsonpの利用)したりすることで、
クロスドメインを突破してWebサービスを利用できる。

上で間違っているのは、以下の部分。

×「クロスドメイン=異なるドメインへJavaScriptで通信すること」
○「クロスドメイン=異なるドメインへJavaScriptのXMLHttpRequestオブジェクトを使って通信すること」

crossDomain1

JavaScriptで別のドメインにアクセスすることを何でもかんでもクロスドメイン、
というのではなく、あくまでもXMLHttpRequestオブジェクトを利用する限り、のようです。
Ajaxは内部でXMLHttpRequestオブジェクトを使っているので、クロスドメインになります。

・・・ということは、

ブラウザにロードされていないJavaScriptリソース(つまり、サーバーサイドJavaScript)
から別ドメインのサービスを呼び出すのは「クロスドメイン」にあたらない・・・
と思います。なのでサーバーサイドJavaScriptと呼ばれているNode.jsのAPIを利用すれば、JavaScriptからでも別ドメインのサービスを普通に呼び出せるのではないか、と思います。(やったことがないので推測なのですが…)
crossDomain2

少なくともWatsonのWebAPIは、Curl、Node.js、Javaによる呼び出しは受け付けており、
XMLHttpRequestによるリクエストは、jsonpであれ何であれ、受け付けない仕様となっています。

このようにWatsonAPIはダメですが、
一般にWebAPIと名打って公開されているもののほとんどは、
事前に利用する側のドメインをAPI提供側サイトの申し込みフォームなどで登録し、
Ajaxの通信時に、指定された形式で登録情報も送ってあげるようにすれば、クロスドメイン突破、APIを使わせてくれるようになっています。
# NHK番組表APIでは、「ユーザー登録」>「アプリを登録」だけでOKでした。

 - JavaScript, 日々 ,