Access-Control-Allow-Origin與Ajax跨域解決方法

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

問題

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

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

跨域

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

 

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

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

我在jsbin上作了一個試驗，使用chrome_6494_1.html' target='_blank'>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.oicqzone.com

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

Access-Control-Allow-Origin: *

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