[JavaScript] XmlHttpRequest Level 2

2012 年 11 月 20 日

クロスドメインで非同期通信（Ajax）が可能に。

クライアントサイド

現在、すでにほとんどのブラウザが対応している。

しかし、IEは8以下だけでなく9でも対応しておらず、独自のXDomainRequestを使わなければならない。

これには、jQueryでさえ今のところ非対応。対応させるには、下記のプラグインなどを導入する必要がある。

• jQuery-ajaxTransport-XDomainRequest (MIT)
• xdr.js (MIT or GPL)
• jQuery CORS Plugin

サーバサイド

レスポンスのヘッダに「Access-Control-Allow-Origin」の記述が必要。

【全ドメインからのリクエストを許可】

Access-Control-Allow-Origin : *

【特定のドメインからのリクエストを許可】
この場合、ひとつのURLしか指定できない。

Access-Control-Allow-Origin : htttp://site.oukasei.com

PHPの場合

header('Access-Control-Allow-Origin : *');

Apacheの場合（httpd.confや.htaccessで）

Header Append Access-Control-Allow-Origin : *

参考

<directory /var/www/mediacore_env/mediacore-mediacore-community-c5783a8/deployment-scripts/mod_wsgi>
	Order allow,deny
	Allow from all

	<ifmodule mod_headers.c>
		Header set Access-Control-Allow-Origin "*"
	</ifmodule>
</directory>

cookieを送りたい場合

参考サイト

クライアントサイド

XMLHttpRequest#withCredentialsをtrueにする。

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

サーバサイド

レスポンスのヘッダに「Access-Control-Allow-Credentials」の記述が必要。
（credentialは「証明書」という意味）

Access-Control-Allow-Credentials : true

JSONPのほうがよほど手軽なのだが、その仕様上、POSTが使えない