Java最新项目实战之跨域处理：一文搞定所有跨域需求，Java开发者必看避坑指南

独家面经总结，超级精彩

本人面试腾讯，阿里，百度等企业总结下来的面试经历，都是真实的，分享给大家！

Java面试准备

准确的说这里又分为两部分：

1. Java刷题
2. 算法刷题

Java刷题：此份文档详细记录了千道面试题与详解；

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

原生实现方式

function callback(res){
console.log(res)//接口返回值
}

let jsonp = document.createElement(‘script’);
jsonp.src = ‘http:/www.monkey.com/admin/getUser?name=小燕子&callback=callback’;

document.getElementsByTagName(‘head’)[0].appendChild(jsonp);//添加到页面中

jsonp.remove();//从页面中移除

jQuery实现

• 第一种：$.ajax()方法

$.ajax({
url:‘http:/www.monkey.com/admin/getUser’,
dataType:“jsonp”,
jsonp: “callback”,//请求时路径参数名
jsonpCallback:“callback”,//设置后端返回函数名
success:function(data){//回调函数
console.log(data);
}
});

• 第二种：$.get()方法

$.get(‘http:/www.monkey.com/admin/getUser’, {各种数据}, function(data) {
console.log(data);
}, ‘jsonp’);

推荐使用$.get()方法

后端node.js核心代码示例：

// jsonp返回设置
res.writeHead(200,{‘Content-Type’:‘text/javascript’});
res.write(callback+‘(’+JSON…stringify(response) + ‘)’);

jsonp跨域只能实现get请求

document.domain+iframe跨域

运用此方法跨域必须有个前提：

这两个域名必须属于同一个一级域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域。

Javascript出于对安全性的考虑，而禁止两个或者多个不同域的页面进行互相操作。
而相同域的页面在相互操作的时候不会有任何问题。

实现方式：

• 父页面（http://www.monkey.com/a.html）

• 子页面（http://monkey.com/b.html）

location.hash + iframe

当两个不同域的页面之间想要实现通信的时候，可以通过与其中一个页面同域的第三个页面实现。因为改变hash值，不会刷新页面，所以可以通过hash值进行传递参数。

画个草图帮助理解：

实现方式：

• a.html(http://www.monkey.com/a.html)

• b.html(http://www.monkey1.com/b.html)

• c.html(http://www.monkey.com/c.html)

此方法有个缺点，就是所有传递的数据都暴露在了url中。

window.name + iframe跨域

window.name的值再不同的页面（包括不同域名）加载后依然存在，并且支持的数据量非常可观，最大2MB。

简单来说就是页面刷新之后，window.name值依旧存在

因此我们可以基于这个原理，我们可以巧妙的实现跨域，并且同时它也是安全操作。

实现方式：

• a.html(http://www.monkey.com/a.html)

var proxy = function(url, callback) {
var state = 0;
var iframe = document.createElement(‘iframe’);

// 加载跨域页面
iframe.src = url;

// onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
iframe.onload = function() {
if (state === 1) {
// 第2次onload(同域proxy页)成功后，读取同域window.name中数据
callback(iframe.contentWindow.name);
destoryFrame();

} else if (state === 0) {
// 第1次onload(跨域页)成功后，切换到同域代理页面
iframe.contentWindow.location = ‘http://www.domain1.com/proxy.html’;
state = 1;
}
};

document.body.appendChild(iframe);

// 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
function destoryFrame() {
iframe.contentWindow.document.write(‘’);
iframe.contentWindow.close();
document.body.removeChild(iframe);
}
};

// 请求跨域b页面数据
proxy(‘http://www.domain2.com/b.html’, function(data){
alert(data);
});

• proxy.html(http://www.monkey.com/proxy.html)

中间代理页，与a.html同域，内容为空即可。

• b.html(http://www.monkey1.com/b.html)

postMessage跨域

随着HTML5的发展，html5工作组提供了两个重要的接口：postMessage(send) 和 onmessage。这两个接口有点类似于websocket，可以实现两个跨域站点页面之间的数据传递。

postMessage(data,origin),接收两个参数：

data是传输的数据，部分浏览器只支持字符串，因此最好传参时使用JSON.stringify()序列化。

origin： 协议+主机+端口号，也可以设置为"*“，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/"。

实现方式：

• a.html(http://www.monkey.com/a.html)

// 接受monkey1返回数据
window.addEventListener(‘message’, function(e) {
alert('data from monkey1 —> ’ + e.data);
}, false);

• b.html(http://www.monkey1.com/b.html)

跨域资源共享（CORS）

只需要服务端设置Access-Control-Allow-Origin即可，前端无须设置

nginx反向代理跨域

nginx在本地搭建一个服务向远程服务器请求数据，前提是前后端分离的条件下，这样后端可以上传他的接口到服务器，或者你可以访问后台本地的环境也是可以的。

• 下载nginx

http://nginx.org/en/download.html

下载任意一个版本即可，我下载的是nginx-1.12.2，下载之后解压即可。

• 配置代理

server {
listen 8080;
server_name localhost;

#charset koi8-r;
access_log logs/k8s.log;

location / {
root D:/_test/front/app; #你项目的根目录
index index.html index.htm;

最后

分享一些资料给大家，我觉得这些都是很有用的东西，大家也可以跟着来学习，查漏补缺。

《Java高级面试》

《Java高级架构知识》

《算法知识》

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

3)]

《Java高级架构知识》

[外链图片转存中…(img-iqqKcn8J-1715449658733)]

《算法知识》

[外链图片转存中…(img-RcO1eREg-1715449658734)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取