Javaweb 开发中解决跨域问题的 5 种解决方案

偏执的太偏执、 2022-05-17 05:06 164阅读 0赞

1.使用 javascript 设置 document.domain 把页面的跨域交互实现统一(一级域名相同的情况之下)

2. HTML 中一种请求是可以跨域的  html 中有src 属性的标签可以支持  get 请求，允许跨域 如: <image src="" /><script src="">

3.使用 JSONP的get 请求进行跨域

jsonp 进行跨域的时候需要设置回调   callback 函数，要保证跨域端的服务器返回的数据是带有 callback函数的 json字符串

4. iframe 之间进行交互，可以使用 window.postMessage 方法进行收发和通信，字符串长度不能超过 255 个，自由通信。

使用 iframe 标签的发送端这样写数据：

iframe.contentWindow.postMessage(obj,'http://localhost:8080/1,html')

被引用的iframe页面里面应该这样写：

window.onmessage = function(e){
    			if(e.origin !== 'http://localhost') return;
    			console.log(e.origin+' '+e.data.msg);
                $("body").css("background-color","blue");
    		}

5.在服务器后台做文章，  CORS ( 安全沙箱机制 )

Access-Control-Allow-Origin:\*;     任何域名都需要请求的

在java 中的设置写法参考如下(web项目中设置一个 Filter)，doFilter 方法这样写：

((HttpServletResponse) res).setHeader("Access-Control-Allow-Origin", "*");
                ((HttpServletResponse) res).setContentType("application/json;charset=UTF-8");
                ((HttpServletResponse) res).setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
                ((HttpServletResponse) res).setHeader("Access-Control-Max-Age", "3600");
                ((HttpServletResponse) res).setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");//表明服务器支持的所有头信息字段
                ((HttpServletResponse) res).setHeader("Access-Control-Allow-Credentials", "true"); //如果要把Cookie发到服务器，需要指定Access-Control-Allow-Credentials字段为true;
                ((HttpServletResponse) res).setHeader("XDomainRequestAllowed","1");