【Javascript】搞定JS面試——跨域問題

1. 什么是跨域？
2. 為什么不能跨域？
3. 跨域的解決方案都有哪些（解決方法/適用場景/get還是post）?

  一、什么是跨域?

      只要協議、域名、端口有任何一個不同，就是跨域。

 

       

二、為什么不能跨域？

      瀏覽器有一個同源策略，用來保護用戶的安全。

     如果沒有這個策略的話，a網站就可以操作b網站的頁面，這樣將會導致b網站的頁面發生混亂，甚至信息被獲取，包括服務器端發來的session。  

     具體詳情請查看：  http://www.cnblogs.com/alvinwei1024/p/4626054.html 

三、跨域的解決方案

     1、JSONP          

解決方法	0）瀏覽器是可以引入不同域下的JS文件，利用這個特性，來實現跨域。 1）直接在a.com頁面，添加一個script標簽，src屬性為b網站的頁面url， 並且傳入一個callback參數。 <script> function dosomething(jsonData){ } </script> <script src="http://www.b.com/handlerData.php? callback=dosomething"></script> 2）b網站的handlerData.php，實際做的操作就是：生成一段可執行的 JS代碼，調用你傳入的dosomething函數。 詳細介紹：http://www.cnblogs.com/2050/p/3191744.html
應用場景	常用的解決方案
請求方式	get ：它本質上是下載一個資源文件。

     

     2、document.domain

應用場景	必須滿足兩個條件 1）頁面中嵌入firame框架。   2）當前頁面和iframe中的頁面，主域、協議、端口必須完全一致。
解決方法	比如頁面地址是http://a.baidu.com/，嵌入的iframe是 http://b.baidu.com/ 分別設置頁面和iframe的document.domain為： baidu.com，就可以解決問題。

 

     

     3、使用H5中的window.postMessage

 

解決方法	window.postMessage(message,targetOrigin)  方法是html5新引進的特性，可以使用它來向其它 的window對象發送消息，無論這個window對象是屬於同源或不同源，目前IE8+、FireFox、Chrome、 Opera等瀏覽器都已經支持window.postMessage方法。
應用場景	1）頁面和其打開的新窗口的數據傳遞 2）.多窗口之間消息傳遞 3）.頁面與嵌套的iframe消息傳遞  詳細介紹：http://www.cnblogs.com/dolphinX/p/3464056.html

     

     4、CORS方案

解決方法	CORS定義一種跨域訪問的機制，可以讓AJAX實現跨域訪問。CORS 允許一個域上的網絡應用 向另一個域提交跨域 AJAX 請求。實現此功能非常簡單，只需由服務器發送一個響應標頭即可。 header("Access-Control-Allow-Origin", "*"); ---“*”號表示允許任何域向我們的服務端提交請求
應用場景	跨域post提交數據
請求方式	post
參考鏈接	詳細介紹請查看： http://www.cnblogs.com/Darren_code/p/cors.html http://www.ruanyifeng.com/blog/2016/04/cors.html