Crossorigin Cover

資料,資料,我需要資料!視覺化通常拿整理好的資料來做,尤其是網頁上的資料視覺化。但如果你需要即時產生的資料,而且資料還是從別的網站來的?前端網頁取得外站資料會有 CORS 的問題,結果一定要寫後端才能取得。但其實這個問題有辦法繞過,今天就來介紹怎麼用 CORS Proxy 「 http://crossorigin.me 」來做到這件事。

所謂的 CORS ( Cross-Origin Resource Sharing ) 問題,簡單的說就是瀏覽器阻止網站程式存取別站的線上資料,除非別站有明確表示認可。因為阻止的是存取外站,所以我們仍然可以在本站撰寫伺服器端程式來繞過這個問題,但這時你就需要一個可執行程式碼的後台主機,而這往往需要付出一筆固定成本。

很幸運的網路上有些人樂意為大家解決這個問題,他們架了一台伺服器,提供准許 CORS 要求的服務,然後透過自身的後端取得指定的 URL 內容傳回給我們。

Depict of CORS Proxy Mechanism

http://crossorigin.me 便是這樣的服務,而他的使用方式也相當簡單,就利用 Ajax 存取 http://crossorigin.me/<你想抓的URL> 即可。例如,若我想取得萌典 ( moedict.tw ) 中的外語翻譯,需要的程式碼如下 ( 使用 d3js ) :

  query = "字典";
  d3.html("http://crossorigin.me/http://moedict.tw/"+query, function(html) {
    d3.select(html).selectAll(".fw_def").each(function() {
      console.log(d3.select(this).text());
    });
  })

這個例子來看,會在網頁上得到如下的輸出結果:

  dictionary, character dictionary
  dictionnaire (de caractères)​
  Wörterbuch (S)​

光是看看程式碼不夠,我們直接來看一下實作吧!

這個實作放置在 github 上,使用 gist + bl.ocks.org Hosting,純前端程式碼,有興趣的話可以參考 https://github.com/infographicstw/example/tree/gh-pages/257 。

結語

Cors Proxy 這樣的服務並不只一個,前陣子還有一個 http://corsproxy.com ,但是最近網站已經無法存取了,倒是這類的程式碼其實還蠻容易就能找到,所以自己架也不是大問題。因為服務不盡然穩定,使用這樣的服務有可能還是要考慮一個備案,避免網站掛點時就無法更新資料了。即便如此,在測試階段使用仍然是相當方便,有興趣的朋友可以參考一下。


Written by infographics.tw

2 Comments

ZoneTwelve

您好,我想請問一下我稍微修改了您的代碼後,搜索其他網站,如您的搜索頁面結果輸出階是找不到的
修改代碼如下
return d3.html(“http://blog.infographics.tw/?s=" + query, function(d){
and
d3.select(d).selectAll(“h3″).each(function(){

Reply

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *