Access-Control-Allow-Origin範例

在JS的世界裡，Ajax的頭號天敵就是為了避免不安全，Browser所設限的coss site not allow的限制，為了避免cross site javascript的問題，傳統作法是透過script tag來嵌入非同個網站的資源，或是使用jsonp來做site to site的呼叫，但是...

• script tag內文必須要是script，否則無法順利讀取，甚至會弄壞網頁中的js...
• jsonp已經被chrome排擠... firefox可以正常使用

有了Node.js的request套件後，我們大可以一行解決... 讓遠方資源變成我發資源：

request.get('http://mysite.com/doodle.png').pipe(resp)

上面可以讓原本需要透過http://mysite.com/doodle.png 來呼叫的資源，透過你制定的鏈結呼叫該資源...

而，根本的解決方式可以使用Header中加入Access-Control-Allow-Origin參數來設定你的js，允許讓其他網站來呼叫...

Server端實作：

See:/examples/basic/http/cross-site-server.js

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200,{"Access-Control-Allow-Origin": "http://10-20-0-31.my.micloud.tw"});
  res.end(JSON.stringify({result:'yes'}));
}).listen(8080);
console.log('Server running at port 8080');

上面設定資源可以讓site:http://10-20-0-31.my.micloud.tw 下面的網頁來呼叫，如果想要讓所有網站都可以呼叫，可以使用"*"來讓所有網站可以呼叫...

Client端實作：

See:/examples/basic/http/cross-site.html

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
  $.getJSON('http://211.78.254.38:8080/', function(data){
    $('#r').html(data.result);
  });
});
</script>
<h1>Server response: <span id="r"></span></h1>