1. 程式人生 > >跨域的三種實現方式

跨域的三種實現方式

一.跨域
  由於瀏覽器同源策略,凡是傳送請求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返回。