Data APIをクロスオリジンで使う

イベントカレンダープラグインを試された方から、「カレンダーが表示されない」との質問を受けました。
該当のページを拝見すると、「クロスオリジン」の制限で表示されていないことが分かりました。
イベントカレンダーだけでなく、Data APIを使う場合にクロスオリジンの制限に引っかかることがありますので、対処法を紹介します。

1.オリジンとは

まず、「オリジン」（origin）という用語から解説します。
オリジンとは、Webページのアドレスの中で、スキーム（httpまたはhttps）／ホスト（www.foo.comなど）／ポート番号の組み合わせのことを指します。
例えば、当ブログのオリジンは「https://www.h-fj.com」です。

2.クロスオリジンの制限

Ajax(XMLHTTPRequest)など、いくつかの処理では、クライアントとサーバーのオリジンが一致していないときには、処理が制限されたり、処理自体が行われなかったりします。
Data APIもXMLHTTPRequestを使って通信していますので、クロスオリジンの制限を受けます。

質問された方のページを見たところ、公開ページのオリジンはドメイン名で指定されていたのに対し、Data APIのオリジンはIPアドレスの形になっていて、両者が異なっていました。
そのため、Data APIの通信が行われず、カレンダーが表示されないという結果になりました。

3.Data APIのクロスオリジン対応

Data APIでは、mt-config.cgiに「DataAPICORSAllowOrigin」の環境変数を設定して、クロスオリジンの通信を許可することができます。
設定値として、許可したいクライアントのオリジンを指定します。

例えば、公開サイトのオリジンが「http://www.foo.com」で、そこからクロスオリジンのMovable TypeのData APIと通信したいとします。
この場合、mt-config.cgiに以下の行を追加します。

DataAPICORSAllowOrigin http://www.foo.com

なお、Data APIのクロスオリジン関係の設定では、状況によっては、DataAPICORSAllowOriginのほかに、以下の環境変数を使う場合もあります。
詳しくは、各環境変数のドキュメントを参照してください。