Access-Control-Allow-Origin與跨域

Access-Control-Allow-Origin與跨域

時間 2014-03-27 20:24:31  Freewind.me原文  http://freewind.me/blog/20140327/2456.html

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

問題

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

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

跨域

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

參考：

• Are different ports on the same server considered cross-domain? (Ajax-wise)
• 同事李棟的博客：跨源資源共享

當跨域訪問時，瀏覽器會發請求嗎

這是真正困擾咱們的問題，由於咱們不清楚瀏覽器會怎麼作。它會不會檢查到你要請求的地址不是同一個域的，直接就禁止了呢？

我在jsbin上 作了一個試驗 ，使用Chrome打開。當點擊「Run with Js」時，控制檯上會打出：

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access. 

但開發者工具的」Network」欄並無任何記錄。它到底發請求了沒？

我又使用 python -m SimpleHTTPServer 在本地建立了一個小服務器，而後把地址改爲它，結果發如今python這邊的確打印出請求來了，可見瀏覽器的確發出了請求。

Access-Control-Allow-Origin

如今該 Access-Control-Allow-Origin 出場了。只有當目標頁面的response中，包含了 Access-Control-Allow-Origin 這個header，而且它的值裏有咱們本身的域名時，瀏覽器才容許咱們拿到它頁面的數據進行下一步處理。如：

Access-Control-Allow-Origin: http://run.jsbin.io 

若是它的值設爲 * ，則表示誰均可以用：

Access-Control-Allow-Origin: * 

沒錯，在產品環境中，沒人會用 *

你能夠閱讀下面這篇文章瞭解更多，並可找到其中的」Run Sample」連接，實際體驗一下：

http://www.html5rocks.com/en/tutorials/cors/