Access-Control-Allow-Origin與跨域

今天與萌萌一起修bug，遇到一個跨域的問題。我們兩個都對它有一些不太清楚，一起搞清楚後記錄下來。

在某域名下使用Ajax向另一個域名下的頁面請求資料，會遇到跨域問題。另一個域名必須在response中添加 <code>Access-Control-Allow-Origin</code> 的header，才能讓前者成功拿到資料。

這句話對嗎？如果對，那麼流程是什麼樣的？

怎樣才能算跨域？協定，域名，端口都必須相同，才算在同一個域。

參考：

<a href="http://stackoverflow.com/questions/1077218/are-different-ports-on-the-same-server-considered-cross-domain-ajax-wise">Are different ports on the same server considered cross-domain? (Ajax-wise)</a>

<a href="http://twlidong.github.io/blog/2013/12/22/kua-yuan-zi-yuan-gong-xiang-cross-origin-resource-sharing-cors/">同僚李棟的部落格：跨源資源共享</a>

這是真正困擾我們的問題，因為我們不清楚浏覽器會怎麼做。它會不會檢查到你要請求的位址不是同一個域的，直接就禁止了呢？

但開發者工具的”Network”欄并沒有任何記錄。它到底發請求了沒？

我又使用 <code>python -m SimpleHTTPServer</code> 在本地建立了一個小伺服器，然後把位址改成它，結果發現在python這邊的确列印出請求來了，可見浏覽器的确發出了請求。

現在該 <code>Access-Control-Allow-Origin</code> 出場了。隻有當目标頁面的response中，包含了 <code>Access-Control-Allow-Origin</code> 這個header，并且它的值裡有我們自己的域名時，浏覽器才允許我們拿到它頁面的資料進行下一步處理。如：

如果它的值設為 <code>*</code> ，則表示誰都可以用：

沒錯，在産品環境中，沒人會用 <code>*</code>

你可以閱讀下面這篇文章了解更多，并可找到其中的”Run Sample”連結，實際體驗一下：

<a href="http://www.html5rocks.com/en/tutorials/cors/">http://www.html5rocks.com/en/tutorials/cors/</a>

如何聯系我：【萬裡虎】www.bravetiger.cn

【QQ】3396726884 （咨詢問題100元起，幫助解決問題500元起）

【部落格】http://www.cnblogs.com/kenshinobiy/