一、什么是跨域
1.URL 解析
URL（Uniform Resource Locator）统一资源定位符（URL）是用于完整地描述 Internet 上网页和其他资源的地址的一种标识方法。
Internet 上的每一个网页都具有一个唯一的名称标识，通常称之为 URL 地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是 Internet 上的站点。简单地说，URL 就是 Web 地址，俗称“网址”。
URL 通常由三部分组成：协议类型，主机名和路径及文件名。
2. 同源策略
所谓同源是指协议，域名，端口均相同。如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以 a.com 下的 js 脚本采用 ajax 读取 b.com 里面的文件数据是会报错的。
同源策略 /SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。
同源策略限制以下几种行为：
Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 Js 对象无法获得
AJAX 请求不能发送
3. 跨域的定义
跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.baidu.com 页面去请求 www.google.com 的资源。（但是浏览器的同源策略会限制你不能这么做，这是是浏览器对 JavaScript 施加的安全限制）跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域
二、跨域场景
URL 说明 是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名，不同文件或路径 允许
http://www.domain.com/lab/c.js
http://www.domain.com:8000/a.js
http://www.domain.com/b.js 同一域名，不同端口 不允许
http://www.domain.com/a.js
https://www.domain.com/b.js 同一域名，不同协议 不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js 域名和域名对应相同 ip 不允许
http://www.domain.com/a.js
http://x.domain.com/b.js 主域相同，子域不同 不允许
http://domain.com/c.js
http://www.domain1.com/a.js
http://www.domain2.com/b.js 不同域名 不允许
三、浏览器为什么要限制跨域访问
原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题：
用户访问 www.mybank.com，登陆并进行网银操作，这时 cookie 啥的都生成并存放在浏览器
用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
这时该网站就可以在它的页面中，拿到银行的 cookie，比如用户名，登陆 token 等，然后发起对 www.mybank.com 的操作。
如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。
四、为什么要跨域？
既然有安全问题，那为什么又要跨域呢？有时公司内部有多个不同的子域，比如一个是 location.company.com , 而应用是放在 app.company.com , 这时想从 app.company.com 去访问 location.company.com 的资源就属于跨域。
五、解决跨域问题的方法
1、通过 jsonp 跨域
2、document.domain + iframe 跨域
3、location.hash + iframe 跨域
4、window.name + iframe 跨域
5、postMessage 跨域
6、跨域资源共享（CORS）
7、nginx 代理跨域
8、nodejs 中间件代理跨域
9、WebSocket 协议跨域
1. 通过 jsonp 跨域
【1】定义：
JSONP 是一种跨域资源请求解决方案，利用了 <script> 标签的 src 属性没有同源限制，进行跨域请求。
【2】原理：
通过动态创建 <script> 标签，然后通过标签的 src 属性获取 js 文件的脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要实现在页面定义好回调函数，本质上使用的并不是 ajax 技术
【3】过程：
网页端插入一个 script 标签，src 指向目标 api 的 url（只能是 get api，因为 script 加载 js 文件是 http get 方法）。这里做一个小改动，url 后面加上 query，?callback=handle
后端 api 处理函数接收到请求，发现有 callback 参数，则将参数值拿下来，得到 handle
后端用 handle 包装数据，返回给浏览器，注意，返回的 content-type 必须是 text/javascript; charset=utf-8
网页端 script 内容加载完成 handle(data)
浏览器发现内容是 js（查看 content-type），则调用 js 解释器执行 handle(data)
【4】核心点
读取 callback 名，比如 handle
将数据封装在 handle 中
将封装好的内容作为 js 脚本内容返回，注意 content-type 必须为 text/javascript; charset=utf-8 以便浏览器正常解析执行 js
【5】配置：
要实现使用 JSONP 跨域需要三步：
第一步，动态创建一个 script 元素；
第二步，设置 script 元素的 src 为想要跨域请求资源的 url，这个 url 的参数 callback 为请求到资源后的处理函数；
第三步，定义处理函数，处理返回的对象；
第四步，把 script 元素添加到页面中
var scriptEl = document.createElement(‘script’);
scriptEl.src = ‘http://www.freegeoip.net/json/?callback=handleResponse’;
document.body.appendChild(scriptEl);
function handleResponse(response) {
/*response 的类型是 Object*/
alert(response.country_name);
}
【6】实际封装应用
// jsonp.js
export function getJSONP(url, cb) {
if (url.indexOf(‘?’) === -1) {
url += ‘?callback=responseHandler’;
} else {
url += ‘&callback=responseHandler’;
}
// 创建 script 标签
var script = document.createElement(‘script’);
// 在函数内部实现包裹函数，因为要用到 cb
// responseHandler 为全局变量
window.responseHandler = function (json) {
try {
cb(json)
} finally {
// 函数调用之后，移除对应的标签
script.parentNode.removeChild(script);
}
}
script.setAttribute(‘src’, url)
document.body.appendChild(script);
}
调用：
import {getJSONP} from “../../utils/jsonp”;
const onSearch = async (query) => {
const url = `https://api.douban.com/v2/book/search?q=${query}`;
getJSONP(url, e => {
// 回调函数
// e 为通过 jsonp 获取的数据
console.log(e)
})
}
1.）原生实现：
<script>
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
// 传参并指定回调执行函数为 onBack
script.src = ‘http://www.domain2.com:8080/login?user=admin&callback=onBack’;
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
</script>
服务端返回如下（返回时即执行全局函数）：
onBack({“status”: true, “user”: “admin”})
2.）jquery ajax：
$.ajax({
url: ‘http://www.domain2.com:8080/login’,
type: ‘get’,
dataType: ‘jsonp’, // 请求方式为 jsonp
jsonpCallback: “onBack”, // 自定义回调函数名
data: {}
});
3.）vue.js：
this.$http.jsonp(‘http://www.domain2.com:8080/login’, {
params: {},
jsonp: ‘onBack’
}).then((res) => {
console.log(res);
})
后端 node.js 代码示例：
var querystring = require(‘querystring’);
var http = require(‘http’);
var server = http.createServer();
server.on(‘request’, function(req, res) {
var params = qs.parse(req.url.split(‘?’)[1]);
var fn = params.callback;
// jsonp 返回设置
res.writeHead(200, { ‘Content-Type’: ‘text/javascript’});
res.write(fn + ‘(‘ + JSON.stringify(params) + ‘)’);
res.end();
});
server.listen(‘8080’);
console.log(‘Server is running at port 8080…’);
【7】优缺点
优点：
它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制，JSONP 可以跨越同源策略；
它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLHttpRequest 或 ActiveX 的支持
在请求完毕后可以通过调用 callback 的方式回传结果。将回调方法的权限给了调用方。这个就相当于将 controller 层和 view 层终于分 开了。我提供的 jsonp 服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续 view 操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个 jsonp 服务。
缺点：
它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求
它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。
jsonp 在调用失败的时候不会返回各种 HTTP 状态码。
缺点是安全性。万一假如提供 jsonp 的服务存在页面注入漏洞，即它返回的 javascript 的内容被人控制的。那么结果是什么？所有调用这个 jsonp 的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用 jsonp 的时候必须要保证使用的 jsonp 服务必须是安全可信的
2.document.domain + iframe 跨域
此方案仅限主域相同，子域不同的跨域应用场景。
实现原理：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。
1.）父窗口：(http://www.domain.com/a.html)
<iframe id=”iframe” src=”http://child.domain.com/b.html”></iframe>
<script>
document.domain = ‘domain.com’;
var user = ‘admin’;
</script>
2.）子窗口：(http://child.domain.com/b.html)
<script>
document.domain = ‘domain.com’;
// 获取父窗口中变量
alert(‘get js data from parent —> ‘ + window.parent.user);
</script>
3.location.hash + iframe 跨域
实现原理：a 欲与 b 跨域相互通信，通过中间页 c 来实现。三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。
具体实现：A 域：a.html -> B 域：b.html -> A 域：c.html，a 与 b 不同域只能通过 hash 值单向通信，b 与 c 也不同域也只能单向通信，但 c 与 a 同域，所以 c 可通过 parent.parent 访问 a 页面所有对象。
1.）a.html：(http://www.domain1.com/a.html)
<iframe id=”iframe” src=”http://www.domain2.com/b.html” style=”display:none;”></iframe>
<script>
var iframe = document.getElementById(‘iframe’);
// 向 b.html 传 hash 值
setTimeout(function() {
iframe.src = iframe.src + ‘#user=admin’;
}, 1000);
// 开放给同域 c.html 的回调方法
function onCallback(res) {
alert(‘data from c.html —> ‘ + res);
}
</script>
2.）b.html：(http://www.domain2.com/b.html)
<iframe id=”iframe” src=”http://www.domain1.com/c.html” style=”display:none;”></iframe>
<script>
var iframe = document.getElementById(‘iframe’);
// 监听 a.html 传来的 hash 值，再传给 c.html
window.onhashchange = function () {
iframe.src = iframe.src + location.hash;
};
</script>
3.）c.html：(http://www.domain1.com/c.html)
<script>
// 监听 b.html 传来的 hash 值
window.onhashchange = function () {
// 再通过操作同域 a.html 的 js 回调，将结果传回
window.parent.parent.onCallback(‘hello: ‘ + location.hash.replace(‘#user=’, ”));
};
</script>
4.window.name + iframe 跨域
window.name 属性的独特之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
1.）a.html：(http://www.domain1.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);
});
2.）proxy.html：(http://www.domain1.com/proxy….
中间代理页，与 a.html 同域，内容为空即可。
3.）b.html：(http://www.domain2.com/b.html)
<script>
window.name = ‘This is domain2 data!’;
</script>
总结：通过 iframe 的 src 属性由外域转向本地域，跨域数据即由 iframe 的 window.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。
5.postMessage 跨域
postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，且是为数不多可以跨域操作的 window 属性之一，它可用于解决以下方面的问题：
a.）页面和其打开的新窗口的数据传递
b.）多窗口之间消息传递
c.）页面与嵌套的 iframe 消息传递
d.）上面三个场景的跨域数据传递
用法：postMessage(data,origin)方法接受两个参数 data：html5 规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用 JSON.stringify()序列化。origin：协议 + 主机 + 端口号，也可以设置为 ”*”，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为 ”/”。
1.）a.html：(http://www.domain1.com/a.html)
<iframe id=”iframe” src=”http://www.domain2.com/b.html” style=”display:none;”></iframe>
<script>
var iframe = document.getElementById(‘iframe’);
iframe.onload = function() {
var data = {
name: ‘aym’
};
// 向 domain2 传送跨域数据
iframe.contentWindow.postMessage(JSON.stringify(data), ‘http://www.domain2.com’);
};
// 接受 domain2 返回数据
window.addEventListener(‘message’, function(e) {
alert(‘data from domain2 —> ‘ + e.data);
}, false);
</script>
2.）b.html：(http://www.domain2.com/b.html)
<script>
// 接收 domain1 的数据
window.addEventListener(‘message’, function(e) {
alert(‘data from domain1 —> ‘ + e.data);
var data = JSON.parse(e.data);
if (data) {
data.number = 16;
// 处理后再发回 domain1
window.parent.postMessage(JSON.stringify(data), ‘http://www.domain1.com’);
}
}, false);
</script>
6. 跨域资源共享（CORS）
普通跨域请求：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带 cookie 请求：前后端都需要设置。
需注意的是：由于同源策略的限制，所读取的 cookie 为跨域请求接口所在域的 cookie，而非当前页。如果想实现当前页 cookie 的写入，可参考下文：nginx 反向代理中设置 proxy_cookie_domain 和 NodeJs 中间件代理中 cookieDomainRewrite 参数的设置。目前，所有浏览器都支持该功能(IE8+：IE8/ 9 需要使用 XDomainRequest 对象来支持 CORS）)，CORS 也已经成为主流的跨域解决方案。
1、前端设置：
1.）原生 ajax
// 前端设置是否带 cookie
xhr.withCredentials = true;
示例代码：
var xhr = new XMLHttpRequest(); // IE8/ 9 需用 window.XDomainRequest 兼容
// 前端设置是否带 cookie
xhr.withCredentials = true;
xhr.open(‘post’, ‘http://www.domain2.com:8080/login’, true);
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xhr.send(‘user=admin’);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
2.）jQuery ajax
$.ajax({
…
xhrFields: {
withCredentials: true // 前端设置是否带 cookie
},
crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含 cookie
…
});
3.）vue 框架
a.) axios 设置：
axios.defaults.withCredentials = true
b.) vue-resource 设置：
Vue.http.options.credentials = true
2、服务端设置：
若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。1.）Java 后台：
/*
* 导入包：import javax.servlet.http.HttpServletResponse;
* 接口参数中定义：HttpServletResponse response
*/
// 允许跨域访问的域名：若有端口需写全（协议 + 域名 + 端口），若没有端口末尾不用加 ’/’
response.setHeader(“Access-Control-Allow-Origin”, “http://www.domain1.com”);
// 允许前端带认证 cookie：启用此项后，上面的域名不能为 ’*’，必须指定具体的域名，否则浏览器会提示
response.setHeader(“Access-Control-Allow-Credentials”, “true”);
// 提示 OPTIONS 预检时，后端需要设置的两个常用自定义头
response.setHeader(“Access-Control-Allow-Headers”, “Content-Type,X-Requested-With”);
2.）Nodejs 后台示例：
var http = require(‘http’);
var server = http.createServer();
var qs = require(‘querystring’);
server.on(‘request’, function(req, res) {
var postData = ”;
// 数据块接收中
req.addListener(‘data’, function(chunk) {
postData += chunk;
});
// 数据接收完毕
req.addListener(‘end’, function() {
postData = qs.parse(postData);
// 跨域后台设置
res.writeHead(200, {
‘Access-Control-Allow-Credentials’: ‘true’, // 后端允许发送 Cookie
‘Access-Control-Allow-Origin’: ‘http://www.domain1.com’, // 允许访问的域（协议 + 域名 + 端口）
/*
* 此处设置的 cookie 还是 domain2 的而非 domain1，
* 因为后端也不能跨域写 cookie(nginx 反向代理可以实现)，
* 但只要 domain2 中写入一次 cookie 认证，后面的跨域接口都能从 domain2 中获取 cookie，
* 从而实现所有的接口都能跨域访问
*/
‘Set-Cookie’: ‘l=a123456;Path=/;Domain=www.domain2.com;HttpOnly’
// HttpOnly 的作用是让 js 无法读取 cookie
});
res.write(JSON.stringify(postData));
res.end();
});
});
server.listen(‘8080’);
console.log(‘Server is running at port 8080…’);
7.nginx 代理跨域
1、nginx 配置解决 iconfont 跨域
浏览器跨域访问 js、css、img 等常规静态资源被同源策略许可，但 iconfont 字体文件 (eot|otf|ttf|woff|svg) 例外，此时可在
nginx 的静态资源服务器中加入以下配置。
location / {
add_header Access-Control-Allow-Origin *;
}
2、nginx 反向代理接口跨域
跨域原理：同源策略是浏览器的安全策略，不是 HTTP 协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议，不会执行 JS 脚本，不需要同源策略，也就不存在跨越问题。
实现思路：通过 nginx 配置一个代理服务器（域名与 domain1 相同，端口不同）做跳板机，反向代理访问 domain2 接口，并且可以顺便修改 cookie 中 domain 信息，方便当前域 cookie 写入，实现跨域登录。
nginx 具体配置：
proxy 服务器
server {
listen 81;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改 cookie 里域名
index index.html index.htm;
# 当用 webpack-dev-server 等中间件代理接口访问 nignx 时，
# 此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带 cookie 时，可为 *
add_header Access-Control-Allow-Credentials true;
}
}
1.) 前端代码示例：
var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写 cookie
xhr.withCredentials = true;
// 访问 nginx 中的代理服务器
xhr.open(‘get’, ‘http://www.domain1.com:81/?user=admin’, true);
xhr.send();
2.) Nodejs 后台示例：
var http = require(‘http’);
var server = http.createServer();
var qs = require(‘querystring’);
server.on(‘request’, function(req, res) {
var params = qs.parse(req.url.substring(2));
// 向前台写 cookie
res.writeHead(200, {
‘Set-Cookie’: ‘l=a123456;Path=/;Domain=www.domain2.com;HttpOnly’ // HttpOnly: 脚本无法读取
});
res.write(JSON.stringify(params));
res.end();
});
server.listen(‘8080’);
console.log(‘Server is running at port 8080…’);
8.nodejs 中间件代理跨域
node 中间件实现跨域代理，原理大致与 nginx 相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中域名，实现当前域的 cookie 写入，方便接口登录认证。
1、非 vue 框架的跨域（2 次跨域）
利用 node + express + http-proxy-middleware 搭建一个 proxy 服务器。
1.）前端代码示例：
var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写 cookie
xhr.withCredentials = true;
// 访问 http-proxy-middleware 代理服务器
xhr.open(‘get’, ‘http://www.domain1.com:3000/login?user=admin’, true);
xhr.send();
2.）中间件服务器：
var express = require(‘express’);
var proxy = require(‘http-proxy-middleware’);
var app = express();
app.use(‘/’, proxy({
// 代理跨域目标接口
target: ‘http://www.domain2.com:8080’,
changeOrigin: true,
// 修改响应头信息，实现跨域并允许带 cookie
onProxyRes: function(proxyRes, req, res) {
res.header(‘Access-Control-Allow-Origin’, ‘http://www.domain1.com’);
res.header(‘Access-Control-Allow-Credentials’, ‘true’);
},
// 修改响应信息中的 cookie 域名
cookieDomainRewrite: ‘www.domain1.com’ // 可以为 false，表示不修改
}));
app.listen(3000);
console.log(‘Proxy server is listen at port 3000…’);
3.）Nodejs 后台同（nginx）
2、vue 框架的跨域（1 次跨域）
利用 node + webpack + webpack-dev-server 代理接口跨域。在开发环境下，由于 vue 渲染服务和接口代理服务都是 webpack-dev-server 同一个，所以页面与代理接口之间不再跨域，无须设置 headers 跨域信息了。
webpack.config.js 部分配置：
module.exports = {
entry: {},
module: {},
…
devServer: {
historyApiFallback: true,
proxy: [{
context: ‘/login’,
target: ‘http://www.domain2.com:8080’, // 代理跨域目标接口
changeOrigin: true,
secure: false, // 当代理某些 https 服务报错时用
cookieDomainRewrite: ‘www.domain1.com’ // 可以为 false，表示不修改
}],
noInfo: true
}
}
9.WebSocket 协议跨域
WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是 serverpush 技术的一种很好的实现。
原生 WebSocket API 使用起来不太方便，我们使用 Socket.io，它很好地封装了 webSocket 接口，提供了更简单、灵活的接口，也对不支持 webSocket 的浏览器提供了向下兼容。
1.）前端代码：
<div>user input：<input type=”text”></div>
<script src=”./socket.io.js”></script>
<script>
var socket = io(‘http://www.domain2.com:8080’);
// 连接成功处理
socket.on(‘connect’, function() {
// 监听服务端消息
socket.on(‘message’, function(msg) {
console.log(‘data from server: —> ‘ + msg);
});
// 监听服务端关闭
socket.on(‘disconnect’, function() {
console.log(‘Server socket has closed.’);
});
});
document.getElementsByTagName(‘input’)[0].onblur = function() {
socket.send(this.value);
};
</script>
2.）Nodejs socket 后台：
var http = require(‘http’);
var socket = require(‘socket.io’);
// 启 http 服务
var server = http.createServer(function(req, res) {
res.writeHead(200, {
‘Content-type’: ‘text/html’
});
res.end();
});
server.listen(‘8080’);
console.log(‘Server is running at port 8080…’);
// 监听 socket 连接
socket.listen(server).on(‘connection’, function(client) {
// 接收信息
client.on(‘message’, function(msg) {
client.send(‘hello：’ + msg);
console.log(‘data from client: —> ‘ + msg);
});
// 断开处理
client.on(‘disconnect’, function() {
console.log(‘Client socket has closed.’);
});
});
参考文章：前端常见跨域解决方案（全）