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

WordPress

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

XMLHttpRequest cannot load https://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に入る(例えばhttps://www.zinntikumugai.comならhttps://www.zinntikumugai.com)
  4. ヘッダーに「Access-Control-Allow-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
Ajaxで、XMLHttpRequestを利用して、自分で作ったWebサービスを、別なドメインにあるサイトから呼び出して使おうと考えたのですが、XMLHttpRequest cannot load is not allowed by Access-Control-Allow-Origin. Refused to g...
CORS 対応時の注意点などメモ - Qiita
同じオリジンのAPIと非同期で通信、という場合は xhr で普通にこなしてますが、別ドメインのAPIと非同期で、となると割とつまづくポイントがあったのでメモ。 こちらのサイトが大変分りやすかったです。 + CORSではまったこと...
クロスドメインで発生するAccess-Control-Allowみたいなエラーの対象方法 – HTML – ごろつきめも
mod_setenvif - Apache HTTP サーバ

コメント