一、反向代理服務(wù)器

基礎(chǔ)思想很簡單，將你的服務(wù)器配置成 需要跨域獲取的資源的 反向代理服務(wù)器。
也就是說，將其他域名的資源映射到你自己的域名之下，這樣瀏覽器就認(rèn)為他們是同源的。
用大家鐘愛的 Apache2 來舉個例子：
首先啟用兩個模塊 proxy 和 proxy_http 來開啟代理功能：

sudo a2enmod proxysudo a2enmod proxy_http

然后在配置文件里面寫入：

ProxyPass "/foo" "http://foo.example.com/bar"ProxyPassReverse "/foo" "http://foo.example.com/bar"

ProxyPass: 遠(yuǎn)程服務(wù)器在本地服務(wù)器的映射。（上面的例子將 http://foo.example.com/bar映射為 /foo）

ProxyPassReverse: 配置 Apache2 在 HTTP 跳轉(zhuǎn)時調(diào)整 Location, Content-Location 和 URI headers的值，防止反向代理被繞開。

重啟 Apache2：

sudo service apache2 restart

大功告成，這樣我們請求 /foo就會得到 http://foo.example.com/bar的內(nèi)容了。
這種方法其實不太常用，機(jī)智的讀者就會發(fā)現(xiàn)，每一個資源都要到自己的服務(wù)器配置，每次配置都還要重啟。

二、CORS

Cross-Origin Resource Sharing 是 W3C 推出的一種跨站資源獲取的機(jī)制。

首先我們來看一下瀏覽器的支持情況：

移動端的瀏覽器對這種方法的支持比較完善?，F(xiàn)在我們看到了，如果不需要兼容 IE6、7的話，就可以使用這種方法。
這種跨域方案主要的思想是：服務(wù)器 在響應(yīng)頭中設(shè)置相應(yīng)的選項，瀏覽器如果支持這種方法的話就會將這種跨站資源請求視為合法，進(jìn)而獲取資源。
可以設(shè)置的響應(yīng)頭信息：

Access-Control-Allow-Origin
Access-Control-Allow-Origin: <origin> | *

origin: 被允許跨域訪問這個資源的網(wǎng)站，*代表全部網(wǎng)站。瀏覽器會檢測這個參數(shù)，如果符合要求，才會去獲取資源。
舉個例子，允許 http://qiaohongshen.github.io/foo來跨域訪問這個資源：

Access-Control-Allow-Origin: http://jasonkid.github.io/fezone
Access-Control-Allow-Credentials
Access-Control-Allow-Credentials: true | false

表示是否允許瀏覽器攜帶 Cookie 來訪問這個資源。這個屬性要和 XMLHttpRequest 的 withCredentials屬性來配合使用。

var xhr = new XMLHttpRequest();
var url = 'http://foo.other/resources/credentialed-content/';
if(xhr) {
  xhr.open('GET', url, true);
  xhr.withCredentials = true; // 設(shè)置帶有 Cookie 的資源請求
  xhr.onreadystatechange = handler;
  xhr.send(); 
}

能夠成功使用帶有 Cookie 的資源請求需要滿足以下幾個條件：

1. XMLHttpRequest
2. 對象中指定了 withCredentials = true
3. 服務(wù)器響應(yīng)頭中 Access-Control-Allow-Credentials: true
4. 服務(wù)器響應(yīng)頭中 Access-Control-Allow-Origin不能為 *

以下選項主要是安全性配置的問題，主要是服務(wù)器的配置問題了，就不展開介紹了：

• Access-Control-Expose-Headers
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers