サーバサイドとクライアントサイドのドメイン分けたら変なエラーが!
その対処法です。
サーバサイドとフロントサイドを分けたら、
OPTIONS http://XXX.XXX/XXX No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://XXX.XXX' is therefore not allowed access. XMLHttpRequest cannot load http://XXX.XXX/XXX. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://XXX.XXX' is therefore not allowed access.
とか
OPTIONS http://XXX.XXX/XXX Request header field Content-Type is not allowed by Access-Control-Allow-Headers. XMLHttpRequest cannot load http://XXX.XXX/XXX. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
っていう、エラーがフロントサイドで出力されることがあります。
これは、ドメインがクロスしてる!っていうところを問題視したエラーらしいです。
解決方法としては、サーバサイドにこのヘッダ情報を追加してください。
Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
このオリジンからのアクセスは許す!
このタイプのヘッダで来たやつは許す!
っていう判断を加えるということですね。
参考:Error in chrome : Content-Type is not allowed by Access-Control-Allow-Headers
CakePHPでだったら、こんな感じで出力するコントローラーに突っ込んどけば。
$this->header('Access-Control-Allow-Origin: *'); $this->header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
Access-Control-Allow-Originの方はアクセス可能な対象を制御できます。
こんな風に。
$this->header('Access-Control-Allow-Origin: http://blog.shg25.com');
参考:続 クロスドメインで使う XMLHttpRequest と CORS の話
実は理解してなかったオリジンについても説明があります。
'オリジンというのは、プロトコル・ドメイン・ポートの3つを合わせた情報のようです。ドメインが一緒でもポートが代われば別オリジン'
なるほどー。