XMLHttpRequestエラーをどうにかする[WordPress,ajax,CORS]

今日ふとブラウザのデバックモード(F12)を起動したら見慣れないエラーが出ていました

XMLHttpRequest cannot load http://www.zinntikumugai.com/2017/08/23/-3309-/embed/?relatedposts=1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

先程書いた記事で更に前の記事を引用したところ、ajax(Jquery)などで取得したときにエラーを吐いたようです

このエラーをどうにかします

解決方法

先に書いておきますね

以下を.httaccessの上の方に書き込んでください(www.zinntikumugai.comとapi.zinntikumugai.comは例なので置き換えてください)

#embed Start
SetEnvIf Origin "^(.*)$" ORIGIN=null
SetEnvIf Origin "^https?:\/\/(www\.zinntikumugai\.com|api\.zinntikumugai\.com)$" ORIGIN=$0
Header append Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
Header append Access-Control-Allow-Headers "Content-Type,X-Requested-With,Accept"
#embed END

原因

ajaxからアクセスした際にアクセスできる有効範囲が設定されていない、有効ではないから

Access-Control-Allow-Origin

クロスドメインなどと言われるようです

自分とは違うドメインに対してアクセスを許可するなどが設定できます

ここを「*」にすればすべてのアクセスを許可します

例えばapi.zinntikumugai.comというサブドメインからのみアクセスを許可する場合

Header append Access-Control-Allow-Origin "https?:\/\/www\.zinntikumugai\.com"

になります

ここが一番問題で「*」にするとエラーは吐きませんでした、逆にドメインを指定してしまうとエラーを吐きます

どうやらこの仕組みの仕様が絡んでいてローカルファイルの場合はドメインではないようです

大雑把に言えばサーバーとサーバー同士なら先程のドメインを指定してやればOKです

ただし、ブラウザの場合は「null」にするようです

ただ、chromeでの話なのでブラウザによって変えたりしたほうが良いかもしれません

一連のながれ

  1. ajaxでサーバーにアクセスが起きる
  2. Originが何であろうと変数ORIGINにnullが入る
  3. Originがwww.zinntikumugai.comまたはapi.zinntikumugai.comのときはアクセスしてきたアドレスがORIGINに入る(例えばhttp://www.zinntikumugai.comならhttp://www.zinntikumugai.com)
  4. ヘッダーに「Access-Control-Allow-Origin: <ORIGIN>」が追加される(<ORIGIN>は変数の値となる)
  5. ヘッダーに「Access-Control-Allow-Headers: Content-Type,X-Requested-With,Accept」が追加される
  6. サーバーからajaxにデータが返される

こんな感じです

Access-Control-Allow-Originの値が変わるぐらいですね


ちなみにセキュリティ的に「*」は控えましたが「null」が返されたことでどう変化するのかはわかりません

誰か教えてくれませんかねぇ

あと、ブラウザの起動オプションで変更してしまうというものもあるようです

参考:

続 クロスドメインで使う XMLHttpRequest と CORS の話 – 日頃の行い

「Access-Control-Allow-Origin」ヘッダの設定で、異なるドメインからのajax呼び出しを行う(Servlet,Apache編) – ぱーくん plus idea

CORS 対応時の注意点などメモ – Qiita

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

Apache モジュール mod_setenvif – Apache

Monacoinを投げる
モナゲ(tipmona)ってなに?
そもそもMonacoinってなに?

コメントする