日本阿v片在线播放免费,成人国产片视频在线观看,日韩黄片毛片在线观看,一区亚洲电影,琪琪秋霞午夜av影视在线,中文字幕在线视频不卡,最新大伊香蕉精品视频在线,亚洲AV无码日韩一区二区乱 

  
      
    

      

	
      
		
      
			
      
				
      前端解決跨域問(wèn)題的常用方法
      
				
      
					
       2019-11-6      seo達(dá)人      
      
					
					
      
						
					
      
				
      
				
			
      
			
      
				
      首先，跨域是什么？

      


      
只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域。為什么三者任何一個(gè)不同就會(huì)產(chǎn)生跨域呢，想想也很容易知道，要是很隨便引用什么外部文件，不同標(biāo)簽下的頁(yè)面引用類似的彼此的文件，瀏覽器很容易懵逼的，保障不了安全問(wèn)題，但在安全限制的同時(shí)也給注入iframe或是ajax請(qǐng)求上帶來(lái)了不少麻煩。所以我們要通過(guò)一些方法使本域的js能夠操作其他域的頁(yè)面對(duì)象或者使其他域的js能操作本域的頁(yè)面對(duì)象

      


      
但有兩點(diǎn)至少要清楚：

      


      
如果是協(xié)議和端口造成的跨域問(wèn)題“前臺(tái)”是無(wú)能為力的；

      
在跨域問(wèn)題上，域僅僅是通過(guò)“URL的首部”來(lái)識(shí)別而不會(huì)去嘗試判斷相同的ip地址對(duì)應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上。

      
(“URL的首部”指window.location.protocol +window.location.host，也可以理解為“Domains, protocols and ports must match”。）

      
1.通過(guò)HTML5的postMessage方法跨域

      


      
頁(yè)面M通過(guò)postMessage方法發(fā)送消息如下：

      


      
window.onload = function() {  

      
    var iframe_dom = document.getElementById('iframId');  

      
    var targetOrigin = ";

      
    iframe_dom.contentWindow.postMessage('hello world!', targetOrigin);  

      
};

      
備注：

      


      
postMessage的使用方法：

      


      
originwindow.postMessage(message, targetOrigin);

      


      
originwindow:是說(shuō)的目標(biāo)窗口，即要給某個(gè)window發(fā)消息，是 window.frames 屬性的成員或者由 window.open 方法創(chuàng)建的窗口

      
message: 是要發(fā)送的消息，類型為 String、Object (但I(xiàn)E8、9 不支持)

      
targetOrigin: 是限定消息接收范圍，不限制請(qǐng)使用 '*

      
頁(yè)面N通過(guò)message事件監(jiān)聽(tīng)并接受消息如下:

      


      
let onmessage = function (event) {  

      
  var data = event.data;//由發(fā)送窗口傳過(guò)來(lái)的消息內(nèi)容  

      
  var origin = event.origin;//由發(fā)送窗口傳過(guò)來(lái)的消息來(lái)源地址  

      
  var source = event.source;//源Window對(duì)象  

      
  if(origin=="      ;

      
    console.log(data);//hello world!  

      
  }  

      
};  

      
if (typeof window.addEventListener != 'undefined') {  

      
  window.addEventListener('message', onmessage, false);  

      
} else if (typeof window.attachEvent != 'undefined') {  

      
  //for ie  

      
  window.attachEvent('onmessage', onmessage);  

      
}

      
或者為了防止接入方的命名沖突，也可以約定事件名，以此加以區(qū)分

      


      
例如

      


      
window.addEventListener("message", function(event) {

      
  if (

      
    event &&

      
    typeof event.data == "object" &&

      
    event.data.event == "FUNCTION_NAME"

      
){

      
document.getElementById("val").innerHTML = event.data.value;

      
} });

      
2.通過(guò)JSONP

      


      
上面那種方式的通信是雙向的，頁(yè)面與iframe或是頁(yè)面與頁(yè)面之間的

      


      
JSONP主要是封裝好的請(qǐng)求方式添加callback,這個(gè)callback是由前后端約定好的

      


      
它的優(yōu)劣勢(shì)：

      


      
JSONP的優(yōu)點(diǎn)：它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。

      
JSONP的缺點(diǎn)：它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題；無(wú)法判斷它是否請(qǐng)求成功，只能通過(guò)timeout

      
3.CORS跨域

      


      
實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器端，只要服務(wù)端那邊實(shí)現(xiàn)了CORS接口，就可以跨源通信

      


      
CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問(wèn)跨域資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是失敗。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。整個(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é)

      


      
服務(wù)器端對(duì)于CORS的支持，主要就是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置，便可以允許Ajax進(jìn)行跨域的訪問(wèn)

      


      
 

      


      
CORS和JSONP對(duì)比

      


      
JSONP只能實(shí)現(xiàn)GET請(qǐng)求，而CORS支持所有類型的HTTP請(qǐng)求。

      


      
使用CORS，開(kāi)發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)，比起JSONP有更好的錯(cuò)誤處理。

      


      
JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS）。

      


      
CORS與JSONP相比，顯然更為先進(jìn)、方便和可靠。

      


      
4.設(shè)置代理

      


      
目前市場(chǎng)上用vue技術(shù)不在少數(shù)，下面介紹一種配置代理方式

      


      
在vue.config.js該文件里面配置如下：

      


      
 devServer: {

      
        port: 8001,

      
        open: true,

      
        disableHostCheck: true,

      
        proxy: {

      
            '/api': {

      
                target: 'https:/xxx.com',

      
                secure: true, // false為http訪問(wèn)，true為https訪問(wèn)

      
                ws: true,

      
                changeOrigin: true,

      
                pathRewrite: {

      
                    '^/api': ''

      
                }

      
             }

      
        }

      
 }

      
 

      


      
后面請(qǐng)求是需要帶上‘/api’請(qǐng)求即可

      

      				
      
								      
			
      
		
      
		
		
	
      


      
    
  
      
    
      日歷
      
    
      
        
      
        
    
      
  
      
    
    
      
      
      鏈接
      
      
        
                
      
    
      
    
      
      
      個(gè)人資料
      
      
    
      
    
      
      
      存檔