1.什么是跨域
跨域崖堤,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本耐床。它是由瀏覽器的同源策略造成的密幔,是瀏覽器對(duì)JavaScript實(shí)施的安全限制。
這里說(shuō)明一下撩轰,無(wú)法跨域是瀏覽器對(duì)于用戶安全的考慮胯甩,如果自己寫個(gè)沒(méi)有同源策略的瀏覽器,完全不用考慮跨域問(wèn)題了堪嫂。是瀏覽器的鍋偎箫,對(duì)。
同源策略限制了一下行為:
Cookie皆串、LocalStorage 和 IndexDB 無(wú)法讀取
DOM 和 JS 對(duì)象無(wú)法獲取
Ajax請(qǐng)求發(fā)送不出去
2.場(chǎng)景
首先狹義的同源就是指淹办,域名、協(xié)議恶复、端口均為相同怜森。
下面舉個(gè)例子:
http://www.yyy.cn/index.html 調(diào)用 http://www.xxxyyy.cn/server.php 非跨域
http://**www.xxxyyy.cn**/index.html 調(diào)用 http://**www.xxx.cn**/server.php 跨域,主域不同
http://**abc**.xxxyyy.cn/index.html 調(diào)用 http://**def**.xxx.cn/server.php 跨域,子域名不同
http://www.xxx.cn:**8080**/index.html 調(diào)用 http://www.xxx.cn/server.php 跨域,端口不同
**https**://www.xxx.cn/index.html 調(diào)用 **http**://www.xxx.cn/server.php 跨域,協(xié)議不同
3.如何跨域
3.1.jsonp方式
jsonp跨域是JavaScript設(shè)計(jì)模式中的一種代理模式。在html頁(yè)面中通過(guò)相應(yīng)的標(biāo)簽從不同域名下加載靜態(tài)資源文件是被瀏覽器允許的(從js中調(diào)用不行)谤牡,所以我們可以通過(guò)這個(gè)“漏洞”來(lái)進(jìn)行跨域副硅。一般,我們可以動(dòng)態(tài)的創(chuàng)建script標(biāo)簽翅萤,再去請(qǐng)求一個(gè)帶參網(wǎng)址來(lái)實(shí)現(xiàn)跨域通信恐疲。局限是只能get請(qǐng)求。
下面是兩種前端實(shí)現(xiàn)方式:
//原生的實(shí)現(xiàn)方式
let script = document.createElement('script');
script.src = 'http://www.xxx.com/xxx.js?callback=callback';
document.body.appendChild(script);
function callback(res) {
console.log(res);
}
//jquery實(shí)現(xiàn)方式
$.ajax({
url:'http://www.xxx.com/login',
type:'GET',
dataType:'jsonp',//請(qǐng)求方式為jsonp
jsonpCallback:'callback',
})
function callback(res) {
console.log(res);
}
特別注意的是,上面代碼里傳入的callback參數(shù)是服務(wù)器傳回?cái)?shù)據(jù)后需要調(diào)用的方法培己,上面代碼中方法是callback();
服務(wù)器端傳回的數(shù)據(jù)格式應(yīng)該是
callback(數(shù)據(jù))
另外有時(shí)會(huì)出現(xiàn)406錯(cuò)誤糜烹,這時(shí)候就需要在響應(yīng)頭中添加Access-Control-Allow-Origin,值為*,表示的是允許所有域名訪問(wèn)漱凝。
response.setHeader("Access-Control-Allow-Origin", "*");
Jsonp很好用對(duì)吧,但只能get請(qǐng)求诸迟。
3.2. 跨域資源共享CORS
這是目前主流的解決方案茸炒。
CORS是一個(gè)W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"(Cross-origin resource sharing)阵苇。 它允許瀏覽器向跨源服務(wù)器壁公,發(fā)出XMLHttpRequest請(qǐng)求,從而克服了AJAX只能同源使用的限制绅项。
CORS需要瀏覽器和服務(wù)器同時(shí)支持紊册。目前,所有瀏覽器都支持該功能快耿,IE瀏覽器不能低于IE10囊陡。IE8+:IE8/9需要使用XDomainRequest對(duì)象來(lái)支持CORS。
整個(gè)CORS通信過(guò)程掀亥,都是瀏覽器自動(dòng)完成撞反,不需要用戶參與。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)搪花,CORS通信與同源的AJAX通信沒(méi)有差別遏片,代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源撮竿,就會(huì)自動(dòng)添加一些附加的頭信息吮便,有時(shí)還會(huì)多出一次附加的請(qǐng)求,但用戶不會(huì)有感覺(jué)幢踏。 因此髓需,實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。
基本只需要對(duì)服務(wù)器動(dòng)手腳惑折,前端代碼跟同源時(shí)一樣授账,也就是不跨域時(shí)一樣。
這種方式分為兩種請(qǐng)求:
一種是簡(jiǎn)單請(qǐng)求惨驶,另一種是非簡(jiǎn)單請(qǐng)求白热。只要滿足下面條件就是簡(jiǎn)單請(qǐng)求
請(qǐng)求方式為HEAD、POST 或者 GET
http頭信息不超出以下字段:
Accept粗卜、Accept-Language
Content-Language
Last-Event-ID
Content-Type(限于三個(gè)值:application/x-www-form-urlencoded屋确、multipart/form-data、text/plain)
為什么要分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求,因?yàn)闉g覽器對(duì)這兩種請(qǐng)求方式的處理方式是不同的攻臀。
簡(jiǎn)單請(qǐng)求
對(duì)于簡(jiǎn)單請(qǐng)求焕数,瀏覽器直接發(fā)出CORS請(qǐng)求。具體來(lái)說(shuō)刨啸,就是在頭信息之中堡赔,增加一個(gè)Origin字段。 下面是一個(gè)例子设联,瀏覽器發(fā)現(xiàn)這次跨源AJAX請(qǐng)求是簡(jiǎn)單請(qǐng)求善已,就自動(dòng)在頭信息之中,添加一個(gè)Origin字段离例。
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0
...
Origin字段用來(lái)說(shuō)明换团,本次請(qǐng)求來(lái)自哪個(gè)源(協(xié)議 + 域名 + 端口)。服務(wù)器根據(jù)這個(gè)值宫蛆,決定是否同意這次請(qǐng)求艘包。
如果Origin指定的源,不在許可范圍內(nèi)耀盗,服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)想虎。 瀏覽器發(fā)現(xiàn),這個(gè)響應(yīng)頭信息沒(méi)有包含Access-Control-Allow-Origin字段袍冷,就知道出錯(cuò)了磷醋,從而拋出一個(gè)錯(cuò)誤,被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲胡诗。
注意邓线,這種錯(cuò)誤無(wú)法通過(guò)狀態(tài)碼識(shí)別,因?yàn)镠TTP回應(yīng)的狀態(tài)碼有可能是200煌恢。
如果Origin指定的域名在許可范圍內(nèi)骇陈,服務(wù)器返回的響應(yīng),會(huì)多出幾個(gè)頭信息字段:
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
上面的頭信息之中瑰抵,有三個(gè)與CORS請(qǐng)求相關(guān)的字段你雌,都以Access-Control-開(kāi)頭
**Access-Control-Allow-Origin *:該字段是必須的。它的值要么是請(qǐng)求時(shí)Origin字段的值二汛,要么是一個(gè)婿崭,表示接受任意域名的請(qǐng)求
Access-Control-Allow-Credentials: 該字段可選。它的值是一個(gè)布爾值肴颊,表示是否允許發(fā)送Cookie氓栈。默認(rèn)情況下,Cookie不包括在CORS請(qǐng)求之中婿着。設(shè)為true授瘦,即表示服務(wù)器明確許可醋界,Cookie可以包含在請(qǐng)求中,一起發(fā)給服務(wù)器提完。這個(gè)值也只能設(shè)為true形纺,如果服務(wù)器不要瀏覽器發(fā)送Cookie,刪除該字段即可徒欣。
Access-Control-Expose-Headers:該字段可選逐样。CORS請(qǐng)求時(shí),XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段:Cache-Control打肝、Content-Language官研、Content-Type、Expires闯睹、Last-Modified、Pragma担神。如果想拿到其他字段楼吃,就必須在Access-Control-Expose-Headers里面指定。
withCredentials 屬性
上面說(shuō)到妄讯,CORS請(qǐng)求默認(rèn)不發(fā)送Cookie和HTTP認(rèn)證信息孩锡。如果要把Cookie發(fā)到服務(wù)器,一方面要服務(wù)器同意亥贸,指定Access-Control-Allow-Credentials字段躬窜。
另一方面,開(kāi)發(fā)者必須在AJAX請(qǐng)求中打開(kāi)withCredentials屬性炕置。
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
// jquery
$.ajax({
...
xhrFields: {
withCredentials: true // 前端設(shè)置是否帶cookie
},
crossDomain: true, // 會(huì)讓請(qǐng)求頭中包含跨域的額外信息荣挨,但不會(huì)含cookie
...
});
否則,即使服務(wù)器同意發(fā)送Cookie朴摊,瀏覽器也不會(huì)發(fā)送默垄。或者甚纲,服務(wù)器要求設(shè)置Cookie口锭,瀏覽器也不會(huì)處理。 但是介杆,如果省略withCredentials設(shè)置鹃操,有的瀏覽器還是會(huì)一起發(fā)送Cookie。這時(shí)春哨,可以顯式關(guān)閉withCredentials荆隘。
需要注意的是,如果要發(fā)送Cookie悲靴,Access-Control-Allow-Origin就不能設(shè)為星號(hào)臭胜,必須指定明確的莫其、與請(qǐng)求網(wǎng)頁(yè)一致的域名。*同時(shí)耸三,Cookie依然遵循同源政策乱陡,只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳,其他域名的Cookie并不會(huì)上傳仪壮,且(跨源)原網(wǎng)頁(yè)代碼中的document.cookie也無(wú)法讀取服務(wù)器域名下的Cookie憨颠。
非簡(jiǎn)單請(qǐng)求
非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求,比如請(qǐng)求方法是PUT或DELETE积锅,或者Content-Type字段的類型是application/json爽彤。
非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求,會(huì)在正式通信之前缚陷,增加一次HTTP查詢請(qǐng)求适篙,稱為"預(yù)檢"請(qǐng)求(preflight)——瀏覽器先詢問(wèn)服務(wù)器,當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中箫爷,以及可以使用哪些HTTP動(dòng)詞和頭信息字段嚷节。只有得到肯定答復(fù),瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求虎锚,否則就報(bào)錯(cuò)硫痰。
var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
瀏覽器發(fā)現(xiàn),這是一個(gè)非簡(jiǎn)單請(qǐng)求窜护,就自動(dòng)發(fā)出一個(gè)"預(yù)檢"請(qǐng)求效斑,要求服務(wù)器確認(rèn)可以這樣請(qǐng)求。下面是這個(gè)"預(yù)檢"請(qǐng)求的HTTP頭信息柱徙。
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
"預(yù)檢"請(qǐng)求用的請(qǐng)求方法是OPTIONS缓屠,表示這個(gè)請(qǐng)求是用來(lái)詢問(wèn)的。頭信息里面护侮,關(guān)鍵字段是Origin藏研,表示請(qǐng)求來(lái)自哪個(gè)源。
除了Origin字段概行,"預(yù)檢"請(qǐng)求頭信息包括兩個(gè)特殊字段蠢挡。
Access-Control-Request-Method:該字段是必須的,用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法凳忙,上例是PUT业踏。
Access-Control-Request-Headers:該字段是一個(gè)逗號(hào)分隔的字符串,指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段涧卵,上例是X-Custom-Header
預(yù)檢請(qǐng)求的回應(yīng)
服務(wù)器收到"預(yù)檢"請(qǐng)求以后勤家,檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后柳恐,確認(rèn)允許跨源請(qǐng)求伐脖,就可以做出回應(yīng)
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
上面的HTTP回應(yīng)中热幔,關(guān)鍵的是Access-Control-Allow-Origin字段,表示http://api.bob.com可以請(qǐng)求數(shù)據(jù)讼庇。該字段也可以設(shè)為星號(hào)绎巨,表示同意任意跨源請(qǐng)求。
如果瀏覽器否定了"預(yù)檢"請(qǐng)求蠕啄,會(huì)返回一個(gè)正常的HTTP回應(yīng)场勤,但是沒(méi)有任何CORS相關(guān)的頭信息字段。這時(shí)歼跟,瀏覽器就會(huì)認(rèn)定和媳,服務(wù)器不同意預(yù)檢請(qǐng)求,因此觸發(fā)一個(gè)錯(cuò)誤哈街,被XMLHttpRequest對(duì)象的onerror回調(diào)函數(shù)捕獲留瞳。控制臺(tái)會(huì)打印出報(bào)錯(cuò)信息骚秦。
服務(wù)器回應(yīng)的其他CORS相關(guān)字段如下:
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
Access-Control-Allow-Methods:該字段必需撼港,它的值是逗號(hào)分隔的一個(gè)字符串,表明服務(wù)器支持的所有跨域請(qǐng)求的方法骤竹。注意,返回的是所有支持的方法往毡,而不單是瀏覽器請(qǐng)求的那個(gè)方法蒙揣。這是為了避免多次"預(yù)檢"請(qǐng)求。
Access-Control-Allow-Headers:如果瀏覽器請(qǐng)求包括Access-Control-Request-Headers字段开瞭,則Access-Control-Allow-Headers字段是必需的懒震。它也是一個(gè)逗號(hào)分隔的字符串,表明服務(wù)器支持的所有頭信息字段嗤详,不限于瀏覽器在"預(yù)檢"中請(qǐng)求的字段个扰。
Access-Control-Allow-Credentials: 該字段與簡(jiǎn)單請(qǐng)求時(shí)的含義相同。
Access-Control-Max-Age: 該字段可選葱色,用來(lái)指定本次預(yù)檢請(qǐng)求的有效期递宅,單位為秒。上面結(jié)果中苍狰,有效期是20天(1728000秒)办龄,即允許緩存該條回應(yīng)1728000秒(即20天),在此期間淋昭,不用發(fā)出另一條預(yù)檢請(qǐng)求俐填。
瀏覽器正常請(qǐng)求回應(yīng)
一旦服務(wù)器通過(guò)了"預(yù)檢"請(qǐng)求,以后每次瀏覽器正常的CORS請(qǐng)求翔忽,就都跟簡(jiǎn)單請(qǐng)求一樣英融,會(huì)有一個(gè)Origin頭信息字段盏檐。服務(wù)器的回應(yīng),也都會(huì)有一個(gè)Access-Control-Allow-Origin頭信息字段驶悟。
PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
瀏覽器的正常CORS請(qǐng)求胡野。上面頭信息的Origin字段是瀏覽器自動(dòng)添加的。下面是服務(wù)器正常的回應(yīng)撩银。
Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin字段是每次回應(yīng)都必定包含的
3.3 nginx代理跨域
1给涕、 nginx配置解決iconfont跨域
瀏覽器跨域訪問(wèn)js、css额获、img等常規(guī)靜態(tài)資源被同源策略許可够庙,但iconfont字體文件(eot|otf|ttf|woff|svg)例外,此時(shí)可在nginx的靜態(tài)資源服務(wù)器中加入以下配置抄邀。
location / {
add_header Access-Control-Allow-Origin *;
}
2耘眨、 nginx反向代理接口跨域
跨域原理: 同源策略是瀏覽器的安全策略,不是HTTP協(xié)議的一部分境肾。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議剔难,不會(huì)執(zhí)行JS腳本,不需要同源策略奥喻,也就不存在跨越問(wèn)題偶宫。
實(shí)現(xiàn)思路:通過(guò)nginx配置一個(gè)代理服務(wù)器(域名與domain1相同,端口不同)做跳板機(jī)环鲤,反向代理訪問(wèn)domain2接口纯趋,并且可以順便修改cookie中domain信息,方便當(dāng)前域cookie寫入冷离,實(shí)現(xiàn)跨域登錄吵冒。
nginx具體配置:
#proxy服務(wù)器
server {
listen 81;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;
# 當(dāng)用webpack-dev-server等中間件代理接口訪問(wèn)nignx時(shí),此時(shí)無(wú)瀏覽器參與西剥,故沒(méi)有同源限制痹栖,下面的跨域配置可不啟用
#add_header Access-Control-Allow-Origin http://www.domain1.com; #當(dāng)前端只跨域不帶cookie時(shí),可為*
add_header Access-Control-Allow-Credentials true;
}
}
1.) 前端代碼示例:
var xhr = new XMLHttpRequest();
// 前端開(kāi)關(guān):瀏覽器是否讀寫cookie
xhr.withCredentials = true;
// 訪問(wèn)nginx中的代理服務(wù)器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();
2.) Nodejs后臺(tái)示例:
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
var params = qs.parse(req.url.substring(2));
// 向前臺(tái)寫cookie
res.writeHead(200, {
'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無(wú)法讀取
});
res.write(JSON.stringify(params));
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
4.結(jié)束語(yǔ)
除了文中提供的三種方法瞭空,還有諸如websocket揪阿、node代理、document.domain + iframe 咆畏、window.name + iframe 图甜、location.hash + iframe等幾種不同的方式,我是不太常用鳖眼,有興趣可以查一下黑毅。
CORS的方法那一段非常冗長(zhǎng),但比較重要钦讳,最好仔細(xì)看下矿瘦。
本文大量借鑒 Nealyang 的文章枕面。稍作修改,希望對(duì)理解有幫助缚去。