跨域的三种实现方式

灰太狼 2022-06-17 04:12 283阅读 0赞

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

域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][http_www.ruanyifeng.com_blog_2016_04_cors.html]

[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html