利用 CORS 解決前端存取 Cross Domain 問題

    今天所要提及的 CORS 全名為 Cross Origin resource sharing，如其字面的意思跨域資源共享，而會接觸到機制是因為前一陣子在存取國內地理資訊機構所提供的 Web Sevice 時，因網站想以 AJAX 方式來呈現資料，故以 JavaScript 這個前端語言來 request 前述的服務，但馬上出了 Acess-Control-Allow-Origin 的問題 。

   搜尋之下，發現原來這是 Same-Origin Policy 的限制，前端語言如 JavaScripts 只能透過 HTTP 發送到來自相同網域的 request ！而且更要求 Protocol,Port,host 都要一樣，相當嚴格！但這樣子的限制也可能造成不便，且很多情況我們也需要運用到跨站存取，以下將會以 CORS 機制解決方法。

    CORS 是 Server 端與 Client Browser 間溝通的機制。藉由加入新的 HTTP Header 使 Server 能提供服務給允許的來源，而 Client 端則會依照 Header 並檢查是否來源是被允許，以下為簡單的一個運用：

    假設由 http://www.example-social-network.com 企圖去 access Online-personal-calendar.com 的 data。 

 Origin: http://www.example-social-network.com

    而在 Online-personal-calendar.com 若有以下的 Acess-Control-Allow-Origin(ACAO) 那麼來自http://www.example-social-network.co 的存取請求將被允許相反則無。

Access-Control-Allow-Origin: http://www.example-social-network.com

    而下方是全面開放的方式，但這並不是一個很好的方式，必須確認資料是 pulic content ，可以給任何人使用，舉例來說：Google 所提供的 Google Fonts 就可以用這樣子的政策，讓大家存取使用。

 Access-Control-Allow-Origin: *

    最後確認 access 的 server 有允許之後，其實就可以用 XMLHttpRequest 來存取該 Server 的服務了，當然這只是一種方式，而且也需要 client browser 有支援 CORS。

    另外補充 JSONP 也是另一個 Cross Domain 的方式，但其可能會有遭受 XSS 攻擊的風險，但若有興趣可以查詢。

Reference：

• Cross-Origin resource sharing Wiki
• Http Access Control MDN
• Same Origin Policy