かえでBlog

色々なことを徒然と……

ajaxを使うとAccess-Control-Allow-Originエラーが発生

      2015/05/17

少し前までは通常に使えてたajaxが急に動かなくなりました。

エラー内容を見てみると

XMLHttpRequest cannot load http://kaede.jp/***.php Origin https://kaede.jp is not allowed by Access-Control-Allow-Origin.

というエラーが発生していました。

Access-Control-Allow-OriginエラーはAjaxにて別ドメイン(クロスドメイン)のデータを取得する際、別ドメインのヘッダー情報にAccess-Control-Allow-Origin情報がないと実行できないようになったようです。

別ドメインならまだしも同一ドメインでもSSLとそうじゃない場合だとエラーになるようです。

httpsのサイトからhttpsのサイト情報を取得するとエラーになるとは……

解決策としては二つ

①phpにAccess-Control-Allow-Originを埋め込む

 
header('Access-Control-Allow-Origin:https://kaede.jp');//特定ドメインのみ許可する場合
header('Access-Control-Allow-Origin:*');//全ドメイン許可する場合 

②サイト全体にAccess-Control-Allow-Originを埋め込む

nginxの場合

server{
#特定ドメインのみ許可する場合
add_header Access-Control-Allow-Origin https://kaede.jp; 
#全ドメインを許可する場合
add_header Access-Control-Allow-Origin *; 
・
・
・

apacheの場合

<Virtualhost *:80>
・
・
・
<Directory>
#特定ドメインのみ許可する場合
Header set Access-Control-Allow-Origin "https://kaede.jp"
#全ドメインを許可する場合
Header set Access-Control-Allow-Origin "*"
・
・
・

これでエラー発生することなく取得することができると思います。

相手のサーバーにAccess-Control-Allow-Originヘッダー情報がない場合はphp等を噛ましてローカルで読み込ますようにしないといけないですね。

 - PHP, サーバー , , ,