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