今日ふとブラウザのデバックモード(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での話なのでブラウザによって変えたりしたほうが良いかもしれません

一連のながれ

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

こんな感じです

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

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

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

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

参考：