聊聊跨域那些事
阿新 • • 發佈：2018-12-11
瀏覽器同源策略： 協議相同，域名相同，埠相同 瀏覽器同源策略會阻止跨域請求，目的是防止CSRF攻擊(跨域請求偽造)
解決方案： 1. JSONP（需要後端配合） 原理是在請求url上加上callback，callback是請求回撥方法的名字， 然後建立script標籤，src寫上請求url， 服務端把資料傳給這個方法名並返回，請求完畢後客戶端就會執行callback 執行完可以刪掉這個script，避免載入多個同樣的script
2. 服務端允許跨域（配合ajax）
// 指定允許其他域名訪問，*可以換成具體的域名 header('Access-Control-Allow-Origin:*'); // 響應型別 header('Access-Control-Allow-Methods:POST'); // 響應頭設定 header('Access-Control-Allow-Headers:x-requested-with,content-type');
這裡兩個小問題 一是非同步非簡單請求會先發送一個options請求去驗證，看服務端是否允許跨域，所以服務端需要有個接收options請求的路由並作返回 二是跨域請求不提供憑證( cookie )，所以前端請求要將withCredentials設定為true，服務端也需要設定響應頭 Access-Control-Allow-Credentials: true
3. iframe（主域不同）
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="box"> <iframe id="if" src="b.com/b.html" frameborder="0"></iframe> </div> <script> var fr = document.getElementById('if'), state = 0;; if(window.VBArray){//相容ie fr.onreadystatechange = function(){ if(this.readyState == 'complete'){ if(state == 1){ // 獲取資料 data = fr.contentWindow.name; }else{ state = 1; // 重置iframe視窗的src保證同源 fr.src = 'a.com/blank.html'; } } } }else{ fr.addEventListener('onload',function(){ if(state == 1){ // 獲取資料 data = fr.contentWindow.name; }else{ state = 1; // 重置iframe視窗的src保證同源 fr.src = 'a.com/blank.html'; } },false); } </script> </body> </html>
4. nginx反向代理 配置反向代理路徑（以後補充）