クロスドメインで発生するAccess-Control-Allowみたいなエラーの対象方法 – HTML

[PR]

サーバサイドとクライアントサイドのドメイン分けたら変なエラーが!

その対処法です。

サーバサイドとフロントサイドを分けたら、

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つを合わせた情報のようです。ドメインが一緒でもポートが代われば別オリジン'

なるほどー。