是一道面试必答题，所以这里详细介绍一下跨域产生的原因列出最常用的解决方案分析各种方法的原理列出各种方法的优缺点方法什么是跨域由于浏览器厂商出于安全考虑，提出了浏览器的同源策略作为解决方案。它是隔离潜在恶意文件的重要安全机制。同源是指协议、域名、端口相同。不同的来源是跨域的。如果没有同源策略会怎样？例如：当你访问平喜喜的网站时//HTML//Pingxixi.com嵌入了Pinduoduo.com//JS//既然有没有同源策略的限制，钓鱼网站可以直接获取其他网站的Dom//所以冰喜喜可以在拼多多输入的账号密码处埋const$iframe=window.frames['pinduoduo'];const$pwd=$iframe.document.getElementById('密码');console.log(`你的密码已泄露：${$pwd}`)解决方案（主流）1.JSONP->get请求跨域原则：script、img等标签无跨域限制实现方案：(例如)//HTML插入标签//JS函数say(name,age){console.log(`${name},${age}yearsold`)}//服务器返回responsesay('zmz',18)//然后client会在脚本onload时执行say方法//结束2.iframe+form实现post请求跨域原理:使用formtarget属性将post请求提交到隐藏的iframe，使页面不跳转vardata={name:'zmz',age:18}varurl='http://localhost/say';var$iframe=document.createElement('iframe');$iframe.name='iframePost';$iframe.style.display='无';文档主体.appendChild($iframe);$iframe.addEventListener('加载',函数(e){console.log($iframe.contentWindow)})constform=document.createElement('form');constipt=document.createElement('输入');表单.action=url;form.enctype='应用程序/json;'form.method='post';//核心代码行//执行指定iframe中的表单form.target=$iframe.name;for(varnameindata){ipt.name=name;ipt.value=数据[名称];form.appendChild(ipt.cloneNode());}form.style.display='无';document.body.appendChild(表单);表单提交（）；文档。body.removeChild(form)3.CORS跨源资源共享原理：新版XMLHttpRequest(ajax2.0)特性，服务器白名单服务器端设置response.setHeader("Access-Control-Allow-xxx...附：ajax2.0新特性可以设置HTTP请求的时间限制，xhr.timeout可以使用FormData对象管理表单数据，可以上传文件。>>同上，可以请求不同域名下的数据（跨域请求），可以在服务器端获取二进制数据xhr.responseType='blob'可以获取数据传输的进度信息xhr.upload.processCORS分类简单请求（自行搜索）SpecifyOrigininthe请求头信息非简单请求会发送预校验请求（options），返回状态码2045代理原则：服务器之间不存在交叉域限制具体实现：//Nginx配置server{#监听9099端口listen9099;#域名为localhostserver_name位置主机;#所有匹配都转发到http://localhost:9871location^~/api{proxy_passhttp://localhost:9871;}}5。postMessage原理：postMessage可以处理各种浏览器窗口之间的通信问题具体实现：//senderwindow.frames['crossDomainIframe']iframe.postMessage('我要数据','http://localhost:8088')window.addEventListener('message',function(){if(e.origin==='http://localhost:2333'){console.log('received',e.data)}}//接收者window.addEventListener('message',(e)=>{if(e.origin==='http://localhost:8088'){console.log(e.data)e.source.postMessage('这里是你要的数据',e.origin);}})6.WebSocket原理：新协议（socket）实现：类似postMessage附：socket.io框架可以解决兼容性问题各种方式对比JSONP和iframe+from兼容性很好，但是报错handling和RESTful接口统一是个问题CORS是最简单粗暴的9102年了，微软不维护win7了，代理肯定会慢，需要找运维withpostMessage处理窗口间通信。附跨域端文章分享同步于：https://github.com/zhongmeizh...
