[CORS] localhostとhoge.localhost間でAjaxを許可する方法
2 min read
状況
api.localhostから JSON をレスポンスしているlocalhostからapi.localhostに対して Ajax 通信できない
クロスドメイン制約が理由である。
クロスドメイン制約とは？
クロスドメイン制約とは、Web ブラウザのセキュリティ機能のひとつで、異なるドメイン間でのリソースの共有を制限するしくみのことである。たとえば、example.com というドメインのサイトから、example.net というドメインのサイトに対して Ajax 通信すると、ブラウザによって通信が制限されてしまう。
クロスドメイン制約を回避する方法
上記の例のように、同じドメイン内であればクロスドメイン制約に違反することはありませんが、異なるドメイン間の通信をする場合は、以下のように HTTP ヘッダを設定することで回避できる。
Access-Control-Allow-Origin
Access-Control-Allow-Origin は、外部からのアクセスを許可するドメインを指定する HTTP レスポンスヘッダ。*を指定することで、すべてのドメインからのアクセスを許可できる。
Access-Control-Allow-Methods
Access-Control-Allow-Methods は、外部から許可する HTTP メソッドを指定する HTTP レスポンスヘッダ。たとえば、GET や POST、DELETE などを指定できる。
Access-Control-Allow-Headers
Access-Control-Allow-Headers は、外部から許可する HTTP リクエストヘッダを指定する HTTP レスポンスヘッダ。たとえば、Content-Type などを指定できる。
実装方法
PHP を使っている場合、以下のようにヘッダを設定することでクロスドメイン制約を回避できる。
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: *");
他の言語でも同様に、HTTP ヘッダを設定することでクロスドメイン制約を回避できる。ただし、Access-Control-Allow-Origin で指定するドメインは、信頼できるドメインに限定することが望ましい。