クロスドメインXMLHttpRequestを実現するnode.js/expressプロキシ

(c)GoogleCustomSearch

node.jsのexpress用のプロキシmiddlewareです。以下のコードをJavaScriptをホストするサーバーで走らせるだけでJSONPが対応していないサーバーに対してもクロスドメインのXHRを可能にします。(localhostは最終的なドメイン名に書き換えてください)

>npm install xhr2proxy

var xhr2proxy = require('xhr2proxy');
var app=require('express').createServer();
app.use(xhr2proxy(prefix:'myprefix',referer:/^http:\/\/localhost/}));
app.listen(8000);

以下の様にJavaScriptからアクセスします。refererオプションの正規表現にマッチしたreferer以外は受け付けません。オプションがない場合はすべてのアクセスを受け入れます。自由に使えるプロキシとなってしまうので注意してください。またrefererの偽装には対応できません

var xhr=new XMLHttpRequest();
xhr.open('get','http://localhost:8000/myprefix/http://myremote.server',false);
xhr.send();

また、JavaScriptをホストするサーバーとnode.jsを実行するサーバーが異なる場合は以下のコードでXHR Level2用のヘッダをすべてのレスポンスに付加します。

var xhr2proxy = require('xhr2proxy');
var app=require('express').createServer();
app.use(xhr2proxy(prefix:'myprefix',acao:'*')); ////Append [Access-Control-Allow-Origin: *]
app.listen(8000);

クロスドメインのXMLHttpRequestの方法とXHR Level2について

XMLHttpRequestはクライアントブラウザからJavaScriptでHTTP通信(ajax)をする為のAPIです。しかしながらXHR Level1ではドメインが異なるサーバーとは通信できないという制限がありました。例えば/tech/のHTMLから起動したJavaScriptからはhttp://www.yahoo.comのデータはとりにいけないということです。

これはとても不便で例えば天気情報を天気予報サイトから取得して表示といったアプリケーションを作るにはクライアントサイドだけでは対応できずサーバーのCGIを使ったり、情報提供サイトにJSONP対応してもらうしかありませんでした。

そこで策定されたのがXHR Level2です。W3C勧告によるとクライアント側の呼び出しはそのままでデータ提供側のHTTPレスポンスヘッダに以下の行を追加すればよいという仕様です。

Access-Control-Allow-Origin: *

しかしながらこれは実は何も解決していません。なぜならデータ提供側(上の例で言うと天気予報サイト側)の対応が必要という意味ではJSONPとなんら変わりが無いからです。

結局はコントロール不能なデータ提供元に対しては本モジュールのようなJavascriptをホストしているドメインにプロキシを置くかすべてのプロキシリクエストのレスポンスにAccess-Control-Allow-Originをつけて返すプロキシが必要なのが現状です。

npmとgithub

参考リンク

この記事を見た人がよく読んでいる記事

カナシスコム > 節約テクノロジ > クロスドメインXMLHttpRequestを実現するnode.js/expressプロキシ