資訊專欄INFORMATION COLUMN
摘要：之前我們講了一下四種跨域的方式四種跨域方式詳解。這四種方式是使用純來進(jìn)行跨域的。今天就介紹兩種有涉及到服務(wù)器的跨域技術(shù)。
之前我們講了一下四種 JavaScript 跨域的方式 - 「JavaScript」四種跨域方式詳解。這四種方式是使用純 JavaScript 來進(jìn)行跨域的。
今天就介紹兩種有涉及到服務(wù)器的跨域技術(shù)。
一、反向代理服務(wù)器基礎(chǔ)思想很簡單，將你的服務(wù)器配置成 需要跨域獲取的資源的 反向代理服務(wù)器。
也就是說，將其他域名的資源映射到你自己的域名之下，這樣瀏覽器就認(rèn)為他們是同源的。
用大家鐘愛的 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: 遠(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)容了。
二、CORS這種方法其實不太常用，機智的讀者就會發(fā)現(xiàn)，每一個資源都要到自己的服務(wù)器配置，每次配置都還要重啟。
Cross-Origin Resource Sharing 是 W3C 推出的一種跨站資源獲取的機制。
首先我們來看一下瀏覽器的支持情況：
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 8 & 9(XDomainRequest), 10 | 12 | 4 |
移動端的瀏覽器對這種方法的支持比較完善。
現(xiàn)在我們看到了，如果不需要兼容 IE6、7的話，就可以使用這種方法。
這種跨域方案主要的思想是：服務(wù)器 在響應(yīng)頭中設(shè)置相應(yīng)的選項，瀏覽器如果支持這種方法的話就會將這種跨站資源請求視為合法，進(jìn)而獲取資源。
可以設(shè)置的響應(yīng)頭信息：
Access-Control-Allow-OriginAccess-Control-Allow-Origin:| *
origin: 被允許跨域訪問這個資源的網(wǎng)站，* 代表全部網(wǎng)站。瀏覽器會檢測這個參數(shù)，如果符合要求，才會去獲取資源。
舉個例子，允許 http://jasonkid.github.io/fezone 來跨域訪問這個資源：
Access-Control-Allow-Origin: http://jasonkid.github.io/fezoneAccess-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 的資源請求需要滿足以下幾個條件：
XMLHttpRequest 對象中指定了 withCredentials = true
服務(wù)器響應(yīng)頭中 Access-Control-Allow-Credentials: true
服務(wù)器響應(yīng)頭中 Access-Control-Allow-Origin 不能為 *
以下選項主要是安全性配置的問題，主要是服務(wù)器的配置問題了，就不展開介紹了：
Access-Control-Expose-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Headers
其他四種跨域方式「JavaScript」四種跨域方式詳解
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85952.html
摘要：超詳細(xì)并且?guī)У目缬蛑改蟻砹吮疚幕谀懔私獾耐床呗?，并且了解使用跨域跨域的理由。使用方法就是將符合上述條件頁面的設(shè)置為同樣的二級域名。這兩個網(wǎng)站都是協(xié)議，端口都是，且二級域名都是。 超詳細(xì)并且?guī)?Demo 的 JavaScript 跨域指南來了！ 本文基于你了解 JavaScript 的同源策略，并且了解使用跨域跨域的理由。 1. JSONP 首先要介紹的跨域方法必然是 JSONP。 ...
摘要：的學(xué)習(xí)筆記是異步和的縮寫，它的作用是執(zhí)行異步的網(wǎng)絡(luò)請求。這就是一個格式的，向這個地址請求，將得到一個回調(diào)函數(shù)，執(zhí)行就得到數(shù)據(jù)。 AJAX的學(xué)習(xí)筆記 AJAX是異步JavaScript和XML的縮寫，它的作用是執(zhí)行異步的網(wǎng)絡(luò)請求。因為JS是線性同步，如果需要用戶向瀏覽器發(fā)送一個請求，那么就需要等瀏覽器接收到了結(jié)果才能繼續(xù)運行，如果發(fā)送到接受的時間太長，瀏覽器就會很長時間處于假死狀態(tài)，這樣...
摘要：由于第二種方法如今已經(jīng)采用的非常少，所以我們在這兒不做講解一帶填充的是一種可以在中繞過同源策略，并發(fā)起跨域請求的使用模式，可以啟動的跨域請求同源策略有一個顯著的例外，腳本元素是可以規(guī)避檢查的。 講跨域之前，我們先來講同源策略（SOP），同源策略是網(wǎng)景公司提出的一個著名安全策略。所謂同源就是域名、協(xié)議、端口相同。例如http://www.12306.cn中，http就是超文本傳輸協(xié)議，1...
摘要：只有兩種數(shù)據(jù)類型描述符，大括號和方括號，其余英文冒號是映射符，英文逗號是分隔符，英文雙引號是定義符。上述兩種集合中若有多個子項，則通過英文逗號進(jìn)行分隔。鍵值對以英文冒號進(jìn)行分隔，并且建議鍵名都加上英文雙引號，以便于不同語言的解析。 由于Sencha Touch 2這種開發(fā)模式的特性，基本決定了它原生的數(shù)據(jù)交互行為幾乎只能通過AJAX來實現(xiàn)。當(dāng)然了，通過調(diào)用強大的PhoneGap插件然后...
閱讀 3255·2021-11-18 10:02
閱讀 1960·2021-09-22 10:54
閱讀 2997·2019-08-30 15:43
閱讀 2588·2019-08-30 13:22
閱讀 1586·2019-08-29 13:57
閱讀 1055·2019-08-29 13:27
閱讀 746·2019-08-26 14:05
閱讀 2532·2019-08-26 13:30
