Tag Archives: API

Solve nodejs Access-Control-Allow-Origin header Issue 如果在NodeJS上解決”Access-Control-Allow-Origin header” 問題

之前在NodeJs寫了一個API 來方便自己去取資料..
誰不知當我在其他網頁用這個API 時出現了”Access-Control-Allow-Origin header” 的問題..

Origin file: not found in Access-control-Allow-Origin header.
Origin file: not found in Access-Control-Allow-Origin header

做了一會Research後 找到了解決方法了
我們只需要加入以下的”allowCrossDomain” 功能 便可以了
解決方法

var express = require('express');

var app = express();

// Code to solve the Access-Control-Allow-Origin header Issue
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

   // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};


app.use(allowCrossDomain);

Hope you find it useful

Online cURL Proxy / API – bypass Origin file: not found in Access-Control-Allow-Origin header issue

很多時候找到一些有趣的API
我們可以直接把這個APIURLQuery String放在browser上而取得Data
但當我們使用Javascript E.G. JQuery $.get 時便會出現以下的錯誤信息
Origin file: not found in Access-Control-Allow-Origin header

XMLHttpRequest: Network Error 0x80700013, Could not complete the operation due to error 80700013.”
Origin file: not found in Access-control-Allow-Origin header.

解決方法
我們可以用cURL 來解決這個問題..
由於我久不久便有這個問題出現..
所以便用nodeJS 來起了一個功能和大家分享.
http://sharechiwainodeexpress.herokuapp.com/curl?url={URL-to-CURL}

E.g.
http://sharechiwainodeexpress.herokuapp.com/curl?url=http://blog.sharechiwai.com

可以用他當作proxy 吧

Hope you find it useful

.Net Consume RESTFUL Services – Make Restful Services Call and Handle JSON reponse

過2星期又有一個Charity Hack Day
所以希望好好用這兩個星期 去好好練習自己的Programming
很多時候Hack Day都是會用到其他公司的API
現在有很多時候都會是使用RESTFUL services的…

今天用的Example使用了Twitter APIGeo Search ..
因為他不用使用API Key
這樣我們便可以更方便的示範怎樣可以在.Net 上 使用WebClient 去 Call一個Restful Service
和當Restful Service 回覆JSON 的資料是怎樣把他們轉換成Object 令到更容易使用

我們會用到這個URL
https://api.twitter.com/1/geo/search.json?query=hong%20kong
在瀏覽器上輸入了這個URL 之後便會出現和下面相似的結果

{"result":{"places":[{"contained_within":[],"name":"Hong Kong","full_name":"Hong Kong","attributes":{},"bounding_box":null,"url":"http:\/

\/api.twitter.com\/1\/geo\/id\/35fd5bacecc4c6e5.json","place_type":"country","id":"35fd5bacecc4c6e5","country_code":"HK","country":"Hong 

Kong"}]},"query":{"type":"search","params":{"autocomplete":false,"query":"hong 

kong","granularity":"neighborhood","accuracy":0,"trim_place":false},"url":"http:\/\/api.twitter.com\/1\/geo\/search.json?

autocomplete=false&query=hong+kong&accuracy=0&granularity=neighborhood&trim_place=false"}}

在.Net上怎樣可以把以上的結果轉成Object呢 和怎樣呼叫這個RestFul services

解決方法:

我們可以使用WebClient這個類
在我們的Project上可以建立一個新的WebClient Object

E.G.
之後設定OpenReadCompletedEventHandler //這個是當Web Server有回覆時會呼叫的功能
傳回來的資料會以Stream 的方式存在

我們要以上邊的JSON Response 建立一些Object方便我們之後取資料時使用
由於這個Restful Service回的是JSON 所以我們會使用到DataContractJsonSerializer 把這個Stream 轉換成Object

以下是

Sample Code
Twitter Object
以下是我以上面的 JSON Result而建立的 Twitter Reponse Object..
為了方便..我沒有填上所有的Properties.. 當大家有不明的的時候歡迎留言給我

     public class TwitterResponse
     {
         public TwitterGeoSearchResult result { get; set; }
     }

     public class TwitterGeoSearchResult
     {
         public List<TwitterPlace> places { get; set; }
     }

     public class TwitterPlace
     {
         public string name { get; set; }
         public string full_name { get; set; }
         public string attributes { get; set; }
         public string bounding_box { get; set; }
         public string place_type { get; set; }
         public string id { get; set; }
         public string country_code { get; set; }
         public string country { get; set; }

     }

     public class TwitterSearchQuery
     {
         public string type { get; set; }
         public string url { get; set; }
     }

定義一個WebClient的Object

private WebClient wc;

建立一個方法用來執行這個 Restful Service Call

private void GetTwitterGeoSearchResult{
   wc = new WebClient();
//定義OpenReadCompletedEventHandler 用來處理 Restful Service 的Response
            wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
我們可以使用 OpenReadAsync 來執行這個Restful Service Call
            wc.OpenReadAsync(new Uri("https://api.twitter.com/1/geo/search.json?query=hong%20kong"));
          }

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
//先檢查有沒有錯誤信息..當錯誤信是Null是我們繼續
            if (e.Error == null)
            {

//我們需要建立一個DataContractJsonSerializer  用來打這個 Stream轉換成我們的Object
                DataContractJsonSerializer data = new DataContractJsonSerializer(typeof(TwitterResponse));
使用ReadObject這個功能轉換 Stream到之前定義好的Object
                TwitterResponse response = (TwitterResponse)data.ReadObject(e.Result);
//之後我們便可以用這個Object取資料了
                MessageBox.Show(response.result.places[0].country);
	    }
	}

請注意:
當使用DataContractJsonSerializer 的時候我們需要加入

using System.Runtime.Serialization.Json;

這個Namespace的
如果在你的Project上找不到的話..
你可能需要加入 System.ServiceModel 這個DLL

Hope you find it useful