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

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

  1、什麼是跨域?

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

 

       

2、爲何不能跨域？

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

     若是沒有這個策略的話，a網站就能夠操做b網站的頁面，這樣將會致使b網站的頁面發生混亂，甚至信息被獲取，包括服務器端發來的session。  

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

3、跨域的解決方案

     一、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 ：它本質上是下載一個資源文件。

     

     二、document.domain

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

 

     

     三、使用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

     

     四、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