日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
理解跨域及常用解決方案

跨域，相信大家無論是在工作中還是在面試中經(jīng)常遇到這個(gè)問題，常常在網(wǎng)上看到別人所整理的一些方法，看似知道是怎么回事，但如果沒有動(dòng)手實(shí)踐過，總覺得自己沒有真正的掌握，在這里，通過自己認(rèn)真思考整理一些常用的方法。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有交城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

跨域的產(chǎn)生

不用多講，作為一名前端開發(fā)人員，相信大家都知道跨域是因?yàn)闉g覽器的同源策略所導(dǎo)致的。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源。瀏覽器引入同源策略主要是為了防止XSS，CSRF攻擊。

CSRF（Cross-site request forgery），跨站請(qǐng)求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。

在同源策略影響下，域名A向域名B發(fā)送Ajax請(qǐng)求，或操作Cookie、LocalStorage、indexDB等數(shù)據(jù),或操作dom，js就會(huì)受到限制，但請(qǐng)求css，js等靜態(tài)資源不受限制

跨域的解決方案

1 通過jsonp跨域

首先說一下jsonp的原理，例如我們平時(shí)寫html的時(shí)候常常會(huì)使用

這種方式去取放在另外服務(wù)器上的靜態(tài)資源，這個(gè)是不受同源策略所限制的，所以我們利用這一點(diǎn)可以解決跨域的問題。

主要代碼如下：

1.1原生實(shí)現(xiàn) 

 
 
 
 
    
  
  
  
  
  1. 在www.a.com域名寫下如下代碼，去請(qǐng)求www.b.com域名的數(shù)據(jù)  
    2. 
  
  
  
  
  2.  
    3.

這里，我們利用動(dòng)態(tài)腳本的src屬性，變相地發(fā)送了一個(gè)http://www.b.com/getdata?call...。這時(shí)候，b.com頁(yè)面接受到這個(gè)請(qǐng)求時(shí)，如果沒有JSONP,會(huì)正常返回json的數(shù)據(jù)結(jié)果，像這樣：{ msg: 'helloworld' },而利用JSONP,服務(wù)端會(huì)接受這個(gè)callback參數(shù)，然后用這個(gè)參數(shù)值包裝要返回的數(shù)據(jù)：demo({msg: 'helloworld'});

這時(shí)候，如果a.com的頁(yè)面上正好有一個(gè)demo 的函數(shù)：

 
 
 
 
    
  
  
  
  
  1. function demo(res){  
    2. 
  
  
  
  
  2. console.log(res);   
    3. 
  
  
  
  
  3. } 
    4.

當(dāng)遠(yuǎn)程數(shù)據(jù)一返回的時(shí)候，隨著動(dòng)態(tài)腳本的執(zhí)行，這個(gè)demo函數(shù)就會(huì)被執(zhí)行。

1.2 jquery ajax請(qǐng)求實(shí)現(xiàn) 

 
 
 
 
    
  
  
  
  
  1. $.ajax({  
    2. 
  
  
  
  
  2.     url:'http://www.b.com/getdata',  
    3. 
  
  
  
  
  3.     type:'get',  
    4. 
  
  
  
  
  4.     dataType: 'jsonp',  // 請(qǐng)求方式為jsonp  
    5. 
  
  
  
  
  5.     jsonpCallback: 'demo', // 自定義回調(diào)函數(shù)名  
    6. 
  
  
  
  
  6.     data: {}  
    7. 
  
  
  
  
  7. }); 
    8.

服務(wù)端代碼實(shí)現(xiàn)：

以nodejs為例 

 
 
 
 
    
  
  
  
  
  1. var http = require(http);  
    2. 
  
  
  
  
  2. //引入url模塊解析url字符串  
    3. 
  
  
  
  
  3. var url = require('url);  
    4. 
  
  
  
  
  4. //引入querystring模塊處理query字符串  
    5. 
  
  
  
  
  5. var querystring = require('querystring');  
    6. 
  
  
  
  
  6. var server = http.createServer();  
    7. 
  
  
  
  
  7. server.on('request',function(req,res){  
    8. 
  
  
  
  
  8.     var urlurlPath = url.parse(req.url).pathname;  
    9. 
  
  
  
  
  9.     var param = querystring .parse(req.url.split('?')[1]);   
    10. 
  
  
  
  
  10.     if(urlPath === '/getData' && param.callback) {    
    11. 
  
  
  
  
  11.         res.writeHead(200,{'Content-Type','application/json;charset=utf-8'});   
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.         var data = { msg: 'helloworld' };  
    14. 
  
  
  
  
  14.         data = JSON.stringify(data );      
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.         var callback = param .callback+'('+data+');';  
    17. 
  
  
  
  
  17.         res.write(callback);      
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19.         res.end();  
    20. 
  
  
  
  
  20.     } else {  
    21. 
  
  
  
  
  21.         res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});       
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23.         res.write('Hell World\n');  
    24. 
  
  
  
  
  24.         res.end();     
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26.     }  
    27. 
  
  
  
  
  27. }) 
    28.

jsonp缺點(diǎn)：只能使用get請(qǐng)求，不推薦使用

2 CORS 跨域資源共享

跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來告訴瀏覽器 讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域 HTTP 請(qǐng)求。

Cross-Origin Resource Sharing跨域資源共享,應(yīng)該算是現(xiàn)在比較推薦的跨域處理方案.不僅適用于各種Method,而且更加方便和簡(jiǎn)單

目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。

2.1 簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求

瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）。

簡(jiǎn)單請(qǐng)求同時(shí)滿足以下條件,只要不滿足以下條件的則為非簡(jiǎn)單請(qǐng)求

非簡(jiǎn)單請(qǐng)求會(huì)發(fā)出一次預(yù)檢測(cè)請(qǐng)求，返回碼是204，預(yù)檢測(cè)通過才會(huì)真正發(fā)出請(qǐng)求，這才返回200。這里通過前端發(fā)請(qǐng)求的時(shí)候增加一個(gè)額外的headers來觸發(fā)非簡(jiǎn)單請(qǐng)求。

2.2 進(jìn)行帶有身份憑證的CORS 請(qǐng)求

  •  默認(rèn)情況下的跨域請(qǐng)求都是不會(huì)把cookie發(fā)送給服務(wù)器的，在需要發(fā)送的情況下，如果是xhr，那么需要設(shè)置xhr.withCredentials=true,
  •  如果是采用fetch獲取的話，那么需要在request里面設(shè)置 credentials:'include',
  •  但是如果服務(wù)器在預(yù)請(qǐng)求的時(shí)候沒返回Access-Control-Allow-Crenditials:true的話，那么在實(shí)際請(qǐng)求的時(shí)候，cookie是不會(huì)被發(fā)送給服務(wù)器端的，要特別注意對(duì)于簡(jiǎn)單的get請(qǐng)求，不會(huì)有預(yù)請(qǐng)求的過程，
  •  那么在實(shí)際請(qǐng)求的時(shí)候，如果服務(wù)器沒有返回Access-Control-Allow-Crenditials:true的話那么響應(yīng)結(jié)果瀏覽器也不會(huì)交給請(qǐng)求者

對(duì)于附帶身份憑證的請(qǐng)求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“*”。

這是因?yàn)檎?qǐng)求的首部中攜帶了 Cookie 信息，如果 Access-Control-Allow-Origin的值為“*”，請(qǐng)求將會(huì)失敗。而將 Access-Control-Allow-Origin 的值設(shè)置為http://www.a.com，則請(qǐng)求將成功執(zhí)行。

2.3 HTTP 響應(yīng)首部字段

  •  Access-Control-Allow-Origin: | *
  •  Access-Control-Expose-Headers 頭讓服務(wù)器把允許瀏覽器訪問的頭放入白名單
  •  Access-Control-Max-Age 頭指定了preflight請(qǐng)求的結(jié)果能夠被緩存多久
  •  Access-Control-Allow-Credentials

    頭指定了當(dāng)瀏覽器的credentials設(shè)置為true時(shí)是否允許瀏覽器讀取response的內(nèi)容。

  •  Access-Control-Allow-Methods 首部字段用于預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求所允許使用的 HTTP 方法。
  •  Access-Control-Allow-Headers 首部字段用于預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求中允許攜帶的首部字段。

2.4 以nodejs express為例，說明如何使用cors解決跨域 

 
 
 
 
    
  
  
  
  
  1. var express=require('express');  
    2. 
  
  
  
  
  2. var url=require('url');  
    3. 
  
  
  
  
  3. var app=express();  
    4. 
  
  
  
  
  4. var allowCrossDomain = function(req, res, next) {  
    5. 
  
  
  
  
  5.     res.header('Access-Control-Allow-Origin', 'http://localhost:63342');  
    6. 
  
  
  
  
  6.     res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');  
    7. 
  
  
  
  
  7.     res.header('Access-Control-Allow-Headers', 'Content-Type');  
    8. 
  
  
  
  
  8.     res.header('Access-Control-Allow-Credentials','true');  
    9. 
  
  
  
  
  9.     next();  
    10. 
  
  
  
  
  10. };  
    11. 
  
  
  
  
  11. app.use(allowCrossDomain);  
    12. 
  
  
  
  
  12. app.get('/getData',function (req,res,next) {  
    13. 
  
  
  
  
  13.     var queryValue=url.parse(req.url).query;  
    14. 
  
  
  
  
  14.     if(queryValue==='fortunewheel@sina.com'){  
    15. 
  
  
  
  
  15.         res.send(true);  
    16. 
  
  
  
  
  16.     }else {  
    17. 
  
  
  
  
  17.         res.send(false);  
    18. 
  
  
  
  
  18.     }  
    19. 
  
  
  
  
  19. });  
    20. 
  
  
  
  
  20. app.listen(3001); 
    21.

實(shí)際開發(fā)過程中，為了安全，會(huì)和token一起使用

3 window.postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

  •  iframe嵌套頁(yè)面跨域通信
  •  頁(yè)面和其打開的新窗口的通信
  •  多窗口之間消息傳遞

用法：

postMessage(data,origin)方法接受兩個(gè)參數(shù)，

data：需要傳遞的數(shù)據(jù)，html5規(guī)范支持任意基本類型或可復(fù)制的對(duì)象，但部分瀏覽器只支持字符串，所以傳參時(shí)最好用JSON.stringify()序列化。

origin：協(xié)議+主機(jī)+端口號(hào)，也可以設(shè)置為"*"，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

代碼示例：

http://www.a.com/a.html 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.  
    3.

http://www.b.com/b.html 

 
 
 
 
    
  
  
  
  
  1.  
    2.

4 document.domain

這種方式只適合主域名相同，但子域名不同的iframe跨域。

實(shí)現(xiàn)原理：兩個(gè)頁(yè)面都通過js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域，就實(shí)現(xiàn)了同域。

使用方式：

http://www.a.com/a.html 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.  
    3.

"http://www.child.a.com/b.html 

 
 
 
 
    
  
  
  
  
  1.  
    2.

5 window.name

window.name 傳輸技術(shù)的基本原理：

當(dāng)在瀏覽器中打開一個(gè)頁(yè)面，或者在頁(yè)面中添加一個(gè)iframe時(shí)即會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的window對(duì)象，當(dāng)頁(yè)面加載另一個(gè)新的頁(yè)面時(shí)，window.name的屬性是不會(huì)變的。這樣就可以利用在頁(yè)面動(dòng)態(tài)添加一個(gè)iframe然后加載數(shù)據(jù)頁(yè)面，在數(shù)據(jù)頁(yè)面將需要的數(shù)據(jù)賦值給window.name。然而此時(shí)承載的iframe的parent頁(yè)面還是不能直接訪問不在同一域下的iframe的那么屬性，這時(shí)，只需要將iframe再加載一個(gè)與承載頁(yè)面同域的空白頁(yè)面，即可對(duì)window.name進(jìn)行數(shù)據(jù)讀取。

通過iframe的src屬性由外域轉(zhuǎn)向本地域，跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個(gè)就巧妙地繞過了瀏覽器的跨域訪問限制，但同時(shí)它又是安全操作。

具體實(shí)現(xiàn)：

http://www.a.com/a.html 主頁(yè)面

http://www.b.com/b.html 數(shù)據(jù)頁(yè)面

http://www.a.com/proxy.html 代理頁(yè)面

http://www.a.com/a.html代碼： 

 
 
 
 
    
  
  
  
  
  1.  
    2.

http://www.b.com/b.html代碼： 

 
 
 
 
    
  
  
  
  
  1. window.name = '123' 
    2.

http://www.a.com/proxy.html空白

6 nginx代理跨域 

 
 
 
 
    
  
  
  
  
  1. server{  
    2. 
  
  
  
  
  2.     # 監(jiān)聽8080端口  
    3. 
  
  
  
  
  3.     listen 8080;  
    4. 
  
  
  
  
  4.     # 域名是localhost  
    5. 
  
  
  
  
  5.     server_name localhost;  
    6. 
  
  
  
  
  6.     #凡是localhost:8080/api這個(gè)樣子的，都轉(zhuǎn)發(fā)到真正的服務(wù)端地址http://www.b.com:8080   
    7. 
  
  
  
  
  7.     location ^~ /api {  
    8. 
  
  
  
  
  8.         proxy_pass http://www.b.com:8080;  
    9. 
  
  
  
  
  9.     }      
    10. 
  
  
  
  
  10. } 
    11.

配置之后就不需要前端做什么修改了，一般我們?cè)谇昂蠖朔蛛x項(xiàng)目中開發(fā)階段會(huì)采用這種方式，但不是所有場(chǎng)景都能這樣做，例如后端接口是一個(gè)公共的API，比如一些公共服務(wù)獲取天氣什么的。

7 WebSocket協(xié)議跨域

websoket協(xié)議天然支持跨域，你只需要學(xué)會(huì)如何使用它即可，關(guān)于websocket協(xié)議請(qǐng)看我的另外一篇文章WebSocket網(wǎng)絡(luò)通信協(xié)議


文章名稱：理解跨域及常用解決方案
標(biāo)題鏈接：http://www.dlmjj.cn/article/ccoihsg.html