XmlHttpRequestで異なるドメインのファイルにアクセスする - JavaScript

XmlHttpRequestでアクセスできるファイルは通常は元ファイルのあるドメインと同一ドメインにあるファイルのみです。ここではXmlHttpRequestで他のドメインにあるファイルへアクセスするための方法を紹介します。

動作環境

ブラウザが"XMLHttpRequest Level 2"(XHR level2 / XHR2)に対応している必要があります。
Firefox, Safari, Chrome, Microsoft Edge, Internet Explorer 8以降がXMLHttpRequest Level 2に対応しています。

概要

XmlHttpRequestで他のドメインにあるファイルにアクセスできるようにするためには、アクセス先のファイルのレスポンスヘッダに

Access-Control-Allow-Origin:*

または

Access-Control-Allow-Origin:(アクセス可能なドメイン名)

を含めます。
Access-Control-Allow-Originでドメインを指定した場合は1つのドメインのみを指定できます。複数のドメインを指定することはできません。Access-Control-Allow-Originを複数行記述することもできないようです。

プログラム例 (C#)

C#でのコード例を紹介します。

コード

jsonを返すハンドラーです。

JsonHandler.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CrossDomainXMLHttpRequest
{
  /// <summary>
  /// JsonHandler の概要の説明です
  /// </summary>
  public class JsonHandler : IHttpHandler
  {
    public class ItemInfo
    {
      public string name;
      public double height;
      public double weight;
      public int price;
      public string memo;
    }


    public void ProcessRequest(HttpContext context)
    {
      ItemInfo ii = new ItemInfo();
      ii.name = "Penguin Statue";
      ii.height = 20;
      ii.weight = 0.25;
      ii.price = 150;
      ii.memo = "かわいいペンギンの置物";

      context.Response.ContentType = "application/javascript";
      context.Response.AddHeader("Access-Control-Allow-Origin", "*"); 
      context.Response.Write("{");
      context.Response.Write(string.Format("\"name\": \"{0:s}\",", ii.name));
      context.Response.Write(string.Format("\"height\": {0:f},", ii.height));
      context.Response.Write(string.Format("\"weight\": {0:f},", ii.weight));
      context.Response.Write(string.Format("\"price\": {0:d},", ii.price));
      context.Response.Write(string.Format("\"memo\": \"{0:s}\"", ii.memo));
      context.Response.Write("}");
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

解説

  context.Response.AddHeader("Access-Control-Allow-Origin", "*");

のコードにより、レスポンスヘッダーに"Access-Control-Allow-Origin:*"を追加しています。このレスポンスヘッダーを指定することでこのWebハンドラーが返すJsonファイルはどのサイトからでもアクセス可能になります。

HTMLファイル

XMLHttpRequestを利用してJSONファイルにアクセスするHTMLファイルです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
    function getJson() {
      //var xmlhttp = createXMLHttpRequest(); //旧バージョンのIEなどに対応する場合
      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var data = JSON.parse(xmlhttp.responseText);

            var elem = document.getElementById("output_name");
            elem.innerText = data.name;
            var elem = document.getElementById("output_weight");
            elem.innerText = data.weight;
            var elem = document.getElementById("output_height");
            elem.innerText = data.height;
            var elem = document.getElementById("output_price");
            elem.innerText = data.price;
            var elem = document.getElementById("output_memo");
            elem.innerText = data.memo;
          } else {
            alert("status = " + xmlhttp.status);
          }
        }
      }
      xmlhttp.open("GET", "http://utils.ipentec.com/jsontest/JsonHandler.ashx");
      xmlhttp.send();
    }

    function createXMLHttpRequest() {
      if (window.XMLHttpRequest) { return new XMLHttpRequest() }
      if (window.ActiveXObject) {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch (e) { }
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch (e) { }
        try { return new ActiveXObject("Microsoft.XMLHTTP") } catch (e) { }
      }
      return false;
    }

  </script>
</head>
<body>
  <input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
  <hr />
  <div>受信情報</div>
  Name:<span id="output_name"></span><br />
  Height:<span id="output_height"></span><br />
  Weight:<span id="output_weight"></span><br />
  Price:<span id="output_price"></span><br />
  Memo:<span id="output_memo"></span><br />

</body>
</html>