「JavaScript」JS兩種服務端相關跨域方法詳解

以前咱們講了一下四種 JavaScript 跨域的方式 - 「JavaScript」四種跨域方式詳解。這四種方式是使用純 JavaScript 來進行跨域的。

今天就介紹兩種有涉及到服務器的跨域技術。

1、反向代理服務器

基礎思想很簡單，將你的服務器配置成 須要跨域獲取的資源的 反向代理服務器。

也就是說，將其餘域名的資源映射到你本身的域名之下，這樣瀏覽器就認爲他們是同源的。

用你們鍾愛的 Apache2 來舉個例子：

首先啓用兩個模塊 proxy 和 proxy_http 來開啓代理功能：

sudo a2enmod proxy
sudo a2enmod proxy_http

而後在配置文件裏面寫入：

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

• ProxyPass: 遠程服務器在本地服務器的映射。（上面的例子將 http://foo.example.com/bar 映射爲 /foo）

• ProxyPassReverse: 配置 Apache2 在 HTTP 跳轉時調整 Location, Content-Location 和 URI headers 的值，防止反向代理被繞開。

重啓 Apache2：

sudo service apache2 restart

大功告成，這樣咱們請求 /foo 就會獲得 http://foo.example.com/bar 的內容了。

這種方法其實不太經常使用，機智的讀者就會發現，每個資源都要到本身的服務器配置，每次配置都還要重啓。

2、CORS

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

首先咱們來看一下瀏覽器的支持狀況：

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
4	3.5	8 & 9(XDomainRequest), 10	12	4

移動端的瀏覽器對這種方法的支持比較完善。
如今咱們看到了，若是不須要兼容 IE六、7的話，就可使用這種方法。

---

這種跨域方案主要的思想是：服務器 在響應頭中設置相應的選項，瀏覽器若是支持這種方法的話就會將這種跨站資源請求視爲合法，進而獲取資源。

能夠設置的響應頭信息：

Access-Control-Allow-Origin

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

origin: 被容許跨域訪問這個資源的網站，* 表明所有網站。瀏覽器會檢測這個參數，若是符合要求，纔會去獲取資源。

舉個例子，容許 http://jasonkid.github.io/fezone 來跨域訪問這個資源：

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; // 設置帶有 Cookie 的資源請求
    xhr.onreadystatechange = handler;
    xhr.send(); 
}

可以成功使用帶有 Cookie 的資源請求須要知足如下幾個條件：

• XMLHttpRequest 對象中指定了 withCredentials = true

• 服務器響應頭中 Access-Control-Allow-Credentials: true

• 服務器響應頭中 Access-Control-Allow-Origin 不能爲 *

---

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

• Access-Control-Expose-Headers

• Access-Control-Allow-Methods

• Access-Control-Allow-Headers

其餘四種跨域方式

「JavaScript」四種跨域方式詳解