跨域的三种实现方式

一.跨域
　　由于浏览器同源策略，凡是发送请求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返回。

cors详见:http://www.ruanyifeng.com/blog/2016/04/cors.html