信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

2013

27

5月

HTTPリクエストとリアルタイムWEB、最近つまずいたこと

テクログ

こんにちは、けーすけです。

 

最初に。
Node.jsがどうとか、そういう話は書いていません。
もっと基本的なところです。
JSでリクエスト送ってサーバで処理するって言うajaxみたいなところです。

 

XMLHttpRequest
非同期なデータの通信を実現するための便利なAPIです。
HTTPリクエストとリアルタイムWEBとか関係するであろうところです。

 

先日、JSのモーダルダイアログで3択のダイアログを作りました。
このモーダルダイアログの入力から処理を分岐して、サーバにコマンドを送る処理です。
コマンドといってもHTTPリクエストにPOSTをくっつけて送るだけのものです。
ローカルで動かしたときはうまくいきましたが、問題は下記です。

 

URLはhttp://cloud.hoge.jp/index.phpです。
モーダルダイアログとか受け取り側のPHPとか書いてませんがご了承ください。

 

//modal.htmlの戻り値は1,2,3のいずれかです。
window.onload = function(){ var action = showModalDialog("http://hoge.jp/modal.html",window,"dialogWidth:300px;dialogHeight:200px"); 
 if(action==1){
   function_hoge(action);
   ・・・(中略)・・・
   alert('hoge1');
 } else if(action==2){
   function_hoge(action);
   var xhr= new XMLHttpRequest();
   xhr.open("POST","http://sub.hoge.jp/modal_cmd.php",TRUE);
   str_post = 'hoge1='+action+'&hoge2='+str_msg;
   xhr.send(str_post);
   alert('hoge2');
 } else {
   alert('hoge3');
 }
}

この場合、必ずalert('hoge3');が表示されます。

 

オリジンがそれぞれ違う点が問題となります。
http://cloud.hoge.jp/index.php
http://hoge.jp/modal.html
http://sub.hoge.jp/modal_cmd.php

 

http://sub.hoge.jp/modal_cmd.phpにポストでhoge1hoge2という値を送ると何かしてくれるプログラムです。
cloudもsubもhoge.jpのサブドメインだから大丈夫だろうという考えの元でやっていました。
1.モーダルダイアログは表示できますが、戻り値は取れません。
2.xhr.send(str_post);はできません。

 

よって、同一ドメインのローカルだと問題なく動作して、複数ドメインをまたいだ検証環境だと動作しないということでした。

この記事を書いた人

マスオさん

coretech

所 属:
WEBインテグレーション事業部
出身地:
渋谷
仕事内容:
Web制作