YUI3を使って、Javascriptから外部ドメインにPOSTリクエストをする

なんでわざわざそんなことをするのかはさておき、
YUI3を使って、Javascriptから外部ドメインにPOSTリクエストをしてみた。

主に障害となるのが、クロスドメイン問題。
この問題を回避するために、色々な手順や準備が必要なので、
備忘録として残しておく。

環境の準備として、用意するのは以下の2つ

1. APIサーバ
2. javascriptからデータをPOSTするクライアント
   

この時、1.と2.は、ドメインが別のサーバにわけておく。
例えば、1.はレンタルサーバ上のWebサーバ(http://example.com/api.php)、
2.は、ローカルにたてたWebサーバ(http://localhost/foo.html)、など。

この環境で、foo.htmlから、api.phpに対してPOSTでデータを送信する。

このときに、foo.htmlの中に、
<form action="http://example.com/api.php" method="post">
とは書いてはいけない、という縛りを設ける。

なんでそんな縛りを設けるか、というと、
http://example.com/api.phpは、データの更新APIという位置づけで、
ページの表示処理をいれたくない。成功か失敗かだけを判定するAPIとして
存在したい。ページの表示処理は、http://localhost/foo.htmlの役割、
http://example.com/api.phpはデータのCRUD操作をする役割として
明確にわけたいからである。

というわけで、foo.htmlからjavascriptをつかって、外部ドメインに対して
データをPOSTしなければいけない、というわけ。

で、結論としては以下の手順でできました。

1. http://example.com/crossdomain.xmlを設置
2. http://localhost/以下にYUI3が提供するio.swfを置く
3. YUI3を用いて、http://localhost/foo.htmlを以下のように記述する

1.に関しては、こちらを参考に。
2.に関しては、YUI3のサンプルページにあるので、ダウンロードしておく。
foo.htmlと同一のドメインから参照できるようにしておかないとだめ。

で、3.のコードはこちらを参考にどうぞ。

セキュリティ？なにそれ、うまいの？
って感じですが、やりたいことが実現できたので、よしとす。