Symfoware

Symfowareについての考察blog

jQueryのajax通信で「No 'Access-Control-Allow-Origin' header」

Cordovaでアプリケーション開発しているとき、www/index.htmlを
ブラウザで開いて動作確認しています。

サーバーに通信してデータを取得するアプリケーションを作っている時、
ajax通信でデータを取得しようとした途端エラー。


XMLHttpRequest cannot load http://192.168.1.101/ajax/message.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.



はい、クロスドメインだからですね。
※もちろん、エミュレーターでの実行はエラーにならない。


毎回エミュレーターで実行するのは効率が悪いので、どうにかならないか調べてみます。




レスポンスヘッダーの定義



ここにそのものズバリの解答が。
続 クロスドメインで使う XMLHttpRequest と CORS の話


Access-Control-Allow-Origin: *




レスポンスヘッダーにこれをつければOK。


サーバー側の処理はCodeIgniterで書いていたので
Output Class
こちらを参考に、outputで対応します。


  1. <?php
  2. class Ajax extends CI_Controller {
  3.     
  4.     public function message() {
  5.         
  6.         $message_list = array();
  7.         
  8.         $message_list[] = array(
  9.             'title' => '初めての通知',
  10.             'message' => 'テストメッセージ',
  11.             'date' => '2014/01/02'
  12.         );
  13.         // set_headerでレスポンスヘッダー設定
  14.         $this->output
  15.             ->set_header('Access-Control-Allow-Origin: *')
  16.             ->set_content_type('application/json', 'utf-8')
  17.             ->set_output(json_encode($message_list));
  18.         
  19.     }
  20.     
  21. }




これでローカルのhtmlを開いた状態で通信が行えるようになりました。
デバッグ時のみヘッダーを設定するようにしておくのが良さそうです。


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/24(火) 22:21:27|
  2. PHP
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova カメラを起動し、撮影内容をサーバーにアップロードする | ホーム | jQuery.DeferredでJavaScriptの非同期処理を綺麗に書く>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1656-640a84ac
この記事にトラックバックする(FC2ブログユーザー)