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进行跨域问题解决
网友评论