跨域的三種實現方式
阿新 • • 發佈:2019-01-03
一.跨域
由於瀏覽器同源策略,凡是傳送請求url的協議、域名、埠三者之間任意一個與當前頁面地址不同即為跨域
前頁面地址與傳送請求的url的協議、域名、埠三者之間任意一個地址不同,既為跨域,哪怕不同域名指向的同一地址,也是跨域。
二.方案
1.script標籤載入
browser:html>js
document.getElementById("btn").onclick=function(){
var str=$('<script type="text/javascript" src="http://127.0.0.1:8080/testJsonp/test.jsp?name=fun">' );
$(document).append(str);
}
Server:jsp
<%
String name=request.getParameter("name");
String html="\'<div id=\"gg\" name=\"ggb\" style=\"color:red\">fdsfdsfd</div>\'";
out.print(“$(document.body).append(”+html+“)”);//自動在body新增html
%>
或者在html定義方法,在jsp呼叫方法,並傳參
2.Ajax的Jsonp,自動解析json為js物件(底層還是通過script標籤)
browser:html>jq
$.ajax("http://127.0.0.1:8080/testJsonp/test.jsp",{
dataType:'jsonp',
jsonp:'funName',
error:function(xhr,errMes,errObj){
alert(errMes);
},
success:function(data){//jQuery18309719266761046812_1484988035397({name:'xiaoming',age:20})
alert(data.name);
}
});
Server:jsp
<%
String name=request.getParameter("funName");
name+="({name:\'xiaoming\',age:20})";
out.print(name);
%>
3.CORS簡單請求
在想跨域的伺服器中新增:
response.setHeader("Access-Control-Allow-Origin", "http://client1.tiglle.com");
引數一:固定Access-Control-Allow-Origin
引數二:允許跨域訪問的域名,或者ip
多個用”,”分隔。”*”代表所有域都能跨域,不安全:
response.setHeader("Access-Control-Allow-Origin", "http://client1.tiglle.com,http://client2.tiglle.com");
response.setHeader("Access-Control-Allow-Origin", "*");
4.CORS非簡單請求
1.非簡單請求會先請求傳送OPTIONS請求驗證
域a的jsp:
<script type="text/javascript">
function launch(){
$.ajax({
url:'http://server.tiglle.com/server/corsServlet',
method:'post',
beforeSend:function(xhr){
xhr.setRequestHeader("a","b");
},
success:function(){
console.log(arguments[0]);
}
});
}
</script>
域b的伺服器的servlet:
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setHeader("Access-Control-Allow-Origin", "http://client1.tiglle.com");
response.getWriter().print("haha,ok le");
}
@Override
protected void doOptions(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE");
response.addHeader("Access-Control-Allow-Headers", "a,b");
}
三.通過nginx解決
頁面地址和nginx監聽地址一致,然後頁面請求地址指向統一nginx,由nginx根據規則轉發到不同伺服器,然後通過nginx返回。