跨域的幾種解決方法

摘要： 1、jsonp 利用 <script src="" > 來解決跨域 假設當前域為localhost:8080,現想訪問localhost:9090來獲取資料則可以 $('head...

1、jsonp

利用

<script src="" >

來解決跨域

假設當前域為localhost:8080,現想訪問localhost:9090來獲取資料則可以

$('head').append("<script src='http://localhost:9090/user/getUserData?userId="123"' callback=showUserData>")

//後臺程式碼
response.setAttribute("callback","xxxxxxxxxx")

2 postMessage

通過

otherWindow.postMessage(message, targetOrigin, [transfer])

otherWindow

其他視窗的一個引用

message

將要傳送到其他 window的資料

targetOrigin

通過視窗的origin屬性來指定哪些視窗能接收到訊息事件，其值可以是字串"*"（表示無限制）或者一個URI。在傳送訊息的時候，如果目標視窗的協議、主機地址或埠這三者的任意一項不匹配targetOrigin提供的值，那麼訊息就不會被髮送

transfer 可選

是一串和message 同時傳遞的Transferable物件

例如

//http://locahost:8080/test1.html
<iframe id="ifraTs2" src="http://localhost:9090/test2.html" >

<scirpt>
var message = "Hello";
var targetOrigin = "http://localhost:9090";
$('#ifraTs2'). contentWindow.postMessage(message,targetOrigin);
</script>

//test2.html接收訊息頁面新增message監聽
<script>
 window.addEventListener("message",function(event) {
//判斷資訊來源地址
if(event. origin == "http://localhost:8080"){
}
})
</script>

3、後臺攔截器進行請求頭修改

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
response.addHeader("Access-Control-Allow-Origin", "*");
　　　　　response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.addHeader("Access-Control-Allow-Headers",
"Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
return true;
}

4配置nginx

通過nginx來進行不同伺服器的跳轉

個人推薦nginx進行跨域問題解決