跨域主要分為ajax跨域和iframe跨域：

　　ajax跨域：在一個window中請求另一個項目的數據，域名發生改變，即為ajax跨域。要支持ajax跨域有幾種方式，如：jsonp，CORS等。這里主要介紹CORS方式。

　　iframe跨域：iframe本身是支持跨域的，即在一個域名下的window支持請求另一個域名下的數據顯示到iframe，而不會產生跨域問題。但此跨域iframe中不允許訪問父window中的屬性和函數。即parent.var和top.var和parent.fn和top.fn會出現跨域異常，此時主要解決的是跨域數據傳輸問題。

?

CORS跨域：

　　CORS跨域的主要思想是自定義HTTP響應頭從而讓瀏覽器和跨域服務器通信。默認情況下跨域訪問時在ajax和http協議中都是不被支持的，為啦支持跨域ajax跨域，請求和響應都必須設置跨域支持參數。

　　請求參數：使用jquery時設置crossDomain:true,如果要攜帶cookie需增加參數xhrFields: {withCredentials: true}。則請求格式為：

1 $.ajax({ 2 crossDomain:true, 3 xhrFields: { 4 withCredentials: true 5 }, 6 url:url, 7 data : data, 8 success: function(data, statusText, xhr){ 9 10 } 11 });　

?

　　響應參數：響應時瀏覽器接收響應的響應頭的響應域名與當前域名不一致，也是不被接受的，會報跨域異常，除非響應頭中包含該域名的訪問控制允許的參數

　　?HttpServletResponse response = (HttpServletResponse) res; ?
??????? response.setHeader("Access-Control-Allow-Origin", "http://fsp1.uce.cn:8005");

?　　如果要允許跨域攜帶cookie,設置響應頭Access-Control-Allow-Credentials屬性為true
??????? response.setHeader("Access-Control-Allow-Credentials", "true");

　　為了統一響應參數，不用在每個controller中設置響應頭。一般通過Filter實現響應頭的統一處理

1 import java.io.IOException; 2 3 import javax.servlet.Filter; 4 import javax.servlet.FilterChain; 5 import javax.servlet.FilterConfig; 6 import javax.servlet.ServletException; 7 import javax.servlet.ServletRequest; 8 import javax.servlet.ServletResponse; 9 import javax.servlet.http.HttpServletResponse; 10 11 public class AccessFilter implements Filter { 12 13 @Override 14 public void init(FilterConfig filterConfig) throws ServletException { 15 16 } 17 18 @Override 19 public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException { 20 21 HttpServletResponse response = (HttpServletResponse) res; 22 response.setHeader("Access-Control-Allow-Origin", "http://fsp1.uce.cn:8005"); 23 response.setHeader("Access-Control-Allow-Credentials", "true"); 24 /*response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 25 response.setHeader("Access-Control-Max-Age", "3600"); 26 response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); */ 27 chain.doFilter(req, res); 28 } 29 30 @Override 31 public void destroy() { 32 33 } 34 35 }

　　這樣ajax請求就實現啦可帶cookie的跨域交互。

　　

　　iframe跨域：iframe原生支持跨域。跨域iframe主要難在和父窗口進行數據交互。

　　　　父窗口向跨域iframe傳輸數據：主要分為postMessage和window.name,postMessage只能在窗口加載完成后才能使用，如果是固定的iframe標簽,可直接獲取iframe.postMessage,如果是動態添加的iframe必須監聽iframe的load事件，在該事件中postMessage。window.name當然也必須在window存在后才能設置，也要設置在iframe的load事件中，但window.name屬性有個特點是只要window存在，doument重新roload的時候，window.name是不變的，因此，對于要在iframe加載過程中使用的數據，我們可以先讓iframe的window load一次，此次load是一個空白頁面，當空白頁面load完成事件設置window.name屬性，在設置window.name屬性后再修改iframe的src讓此window重新加載目標跨域頁面，這時在該跨域頁面加載過程中就個通過window.name獲取到父頁面傳輸的數據。

　　　　　　主要有兩種情況：

　　　　　　　　1>傳輸的數據在此跨域iframe加載完成后內部觸發事件時使用，可通過postMessage傳輸,此方法較為簡單

　　　　　　　　

var state = 1;
document.getElementById('#iframeId').addEventListener("load",function() {if(state == 1) {state = 0;this.contentWindow.postMessage(data,crossDomain)} }, true);

?　　　　　　　　2>傳輸的數據在此跨域iframe加載過程中調用，此時不能在使用postMessage,該方法只能執行于窗口加載完成后，即load事件后，但在加載過程中如果獲取參數，該參數還未傳遞過來，此時必須使用window.name傳遞，window的name屬性在窗口重新加載內容的時候是不會改變的，最大支持2M。既然要在窗口load時就要讀取參數，那么該參數必須要在窗口load之前設置進去，所以要首先load一次窗口，此次load的url為一空白中間頁面，目的只是讓window加載并且設置window.name屬性，在設置之后改變iframe的url為我們的目標跨域url,則iframe從新出發load事件，此時load的過程中就可以獲取上次load中間頁面設置的window.name屬性就獲取到了父窗口的值

　　跨域iframe向父窗口傳遞數據“

　　　　此時iframe已經加載完成，使用postMessage比較方便，父窗口監聽跨域iframe的messge,進行相應的處理，比如調用自身的函數

　　　　

window.onload = function() {if(window.top == window.self) {//當前窗口為最頂層窗口return;} else {//折疊消息面板document.body.onclick = function(event) {//如果直接調用父頁面成功，則直接調用，如果調用失敗則為跨域，向父頁面傳遞消息try {if(window.top.vm.settings.type) {window.top.vm.openSetting(event);}} catch(e) {window.top.postMessage('click', '*');}}//皮膚設置var settings = localStorage.settings;var themes = settings ? JSON.parse(settings) : {themes: "default"}var css = document.createElement('style');css.type = 'text/css';css.id = "themes-setting";if(themes.themes == 'default') {css.innerHTML = ".iconfont{color:#ff9372;}";} else if(themes.themes == 'blue') {css.innerHTML = ".iconfont{color:#23b7e5;}";} else {css.innerHTML = ".iconfont{color:#464c5b;}";}document.head.appendChild(css);}} /*** 監聽跨域iframe傳遞的消息*/window.addEventListener('message', function(e) {var operate = e.data;switch(operate) {case 'click':debuggerif(vm.settings.type){vm.openSetting();}break;default:break;}})

?

轉載于:https://www.cnblogs.com/xj-blog/p/8288857.html

總結

以上是生活随笔為你收集整理的WEB跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。