這個東西我想對寫網頁程式碼的人來說，是個常會遇到的問題。而它出現的原因，主要是考慮瀏覽器在網路上傳送資料安全性的關係，所以，下面我想把目前網路上對CROS (Cross-origin resource sharing) 跨來源資源共享提供的資料大概整理一下並做個介紹，如下：

跨來源資源共享（Cross-Origin Resource Sharing (CORS)）

寫網頁程式碼過程中，通常前台會用AJAX / API或 XMLHttpRequest的方式去跟Server 要資料，好，問題來了，就算成功傳送出要求data的需求，但卻會出現下列錯誤而要不到data，這是什麼意思呢？如剛剛一開始所說的，主要是考慮瀏覽器在網路上傳送資料安全性的關係，"同來源"的資源才可以相互存取，若是不同來源的資源，則必須符合在某些特定的情況下，才可以允許存取。

No 'Access-Control-Allow-Origin'header is present on the requested resource. Origin 'null' is therefore not allowed access.

那同來源和不同來源的定義怎麼區別，下面簡單舉個例子來判斷：

依這個網址為主， http://store.company.com/dir/page.html，若是遇到下列網址其代表是....

URL	歸類	備註
http://store.company.com/dir2/other.html	同來源
http://store.company.com/dir/inner/another.html	同來源
https://store.company.com/secure.html	不同來源	協定不同 (http 與 https的差異)
http://store.company.com:81/dir/etc.html	不同來源	埠號不同 (http://store.company.com:81)
http://news.company.com/dir/other.html	不同來源	主機位置不同 (http://store.company.com 與http://news.company.com的差異)

所以，從上面的舉例而知，只要data是來自於不同網域(domain)，通訊協定(protocol)或通訊埠(port)，都被定義為不同來源，若要取得data，在瀏覽器這邊送出一個 request 的時候，會在 request 的 header 塞入 Origin 這個資料，來讓目前瀏覽網站的使用者代理取得存取其他來源（網域）伺服器特定資源權限的機制。

 

 

查看原文 >>