如何做资源论坛网站,成品网站整套源码,山东企业网站建设报价,创新创意产品设计作业韦陀掌法,难陀时间善恶#xff1b;梯云纵,难纵过乱世纷扰。现在开始写代码o(╯□╰)o什么是跨域1.跨域的定义广义的跨域是指一个域下对的文档或者脚本试图去请求另外一个域下的资源。a链接、重定向、表单提交、、、等标签background:url()、font-face()ajax 跨域请求……狭义的… 韦陀掌法,难陀时间善恶梯云纵,难纵过乱世纷扰。现在开始写代码o(╯□╰)o什么是跨域1.跨域的定义广义的跨域是指一个域下对的文档或者脚本试图去请求另外一个域下的资源。a链接、重定向、表单提交、、、等标签background:url()、font-face()ajax 跨域请求……狭义的跨域是指浏览器同源策略限制的一类请求场景。同源策略前端跨域的主要解决方法1.jsonp跨域原理动态创建 标签然后利用 的src不受同源策略约束来跨域获取数据。缺点只支持get方式请求原生js实现 var script document.createElement(script); script.type text/javascript; // 传参一个回调函数名给后端方便后端返回时执行这个在前端定义的回调函数 script.src http://www.domain2.com:8080/login?useradmincallbackjsonPCallback; document.head.appendChild(script); // 前端回调执行函数 function jsonPCallback(res) { alert(JSON.stringify(res)); } //服务端返回如下(后端返回执行函数) jsonPCallback({status: true, user: admin})jquery实现$.ajax({ url: http://www.domain2.com:8080/login, type: get, dataType: jsonp, // 请求方式为jsonp jsonpCallback: handleCallback, // 自定义回调函数名 data: {}});2.CORS(跨域资源共享)CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能IE浏览器不能低于IE10。整个CORS通信过程都是浏览器自动完成不需要用户参与。浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息有时还会多出一次附加的请求但用户不会有感觉。与jsonp相比支持所有类型的HTTP请求。但JSONP支持老式浏览器。1.简单请求(1) 请求方法是以下三种方法之一HEADGETPOST(2)HTTP的头信息不超出以下几种字段AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain同时满足以上两个条件的就是简单请求//简单请求浏览器自动增加Origin字段Origin字段用来说明本次请求来自哪个源(协议 域名 端口)。服务器根据这个值决定是否同意这次请求。Content-Type: text/plainOrigin: http://www.domain.comUser-Agent: Mozilla/5.0//如果Origin指定的源不在许可范围内服务器会返回一个正常的HTTP回应。浏览器检查这个响应的头信息有没有包含Access-Control-Allow-Origin字段没有的话就会抛出一个错误被XMLHttpRequest的onerror回调函数捕获。注意这种错误无法通过状态码识别因为HTTP回应的状态码有可能是200。//如果Origin指定的域名在许可范围内服务器返回的响应会多出几个头信息字段。Access-Control-Allow-Origin: http://www.domain.com //值要么是请求时Origin字段的值要么是一个*表示接受任意域名的请求。Access-Control-Allow-Credentials: true//值是一个布尔值表示是否允许发送Cookie。默认情况下Cookie不包括在CORS请求之中。设为true即表示服务器明确许可Cookie可以包含在请求中一起发给服务器。这个值也只能设为true如果服务器不要浏览器发送Cookie删除该字段即可。同时请求中也要设置var xhr new XMLHttpRequest();xhr.withCredentials true;//Access-Control-Allow-Origin此时不能设为星号Access-Control-Expose-Headers: FooBar//用于拿到XMLHttpRequest对象非基本字段2.复杂请求//与简单请求不同的是复杂请求多了2个字段进行服务器预检Access-Control-Request-Method该次请求的请求方式Access-Control-Request-Headers该次请求的自定义请求头字段//预检成功服务器返回的响应//指定允许其他域名访问Access-Control-Allow-Origin://是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回Access-Control-Allow-Credentials:true//预检结果缓存时间Access-Control-Max-Age: 1800//允许的请求类型Access-Control-Allow-Methods:GET,POST,PUT,POST//允许的请求头字段Access-Control-Allow-Headers:x-requested-with,content-type4.iframe 家族1.window.namewindow.name有以下特征每个窗口都有独立的window.name与之对应在一个窗口被关闭前窗口载入的所有页面同时共享一个window.name每个页面对window.name都有读写的权限window.name一直存在与当前窗口即使是有新的页面载入也不会改变window.name的值window.name可以存储最多2M的数据数据格式按需自定义。原理在页面中动态创建一个iframe页面指向另一个域将数据赋值给ifram的window.name属性。(此时页面不能直接读取iframe的window.name),我们还需要将将iframe的src指向相同域的空白页面。之后再将iframe删除就可以了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.domain.com/aa.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.domain1.com/b.html, function(data){ alert(data);}); window.name This is domain1 data!;2.document.domain主域相同子域不同的跨域应用场景。 原理两个页面都通过js强制设置document.domain为基础主域就实现了同域。 document.domain domain.com; var user admin; document.domain domain.com; // 获取父窗口中变量 alert(get js data from parent --- window.parent.user);3.location.hashlocation.hash指的是URL的#后面的部分比如www.domain1.com/b.html#hello 的#hello只改变hash是不会刷新页面。 原理通过中间页面来实现。 三个页面不同域之间利用iframe的location.hash传值相同域之间直接js访问来通信。 var iframe document.getElementById(iframe); // 向b.html传hash值 setTimeout(function() { iframe.src iframe.src #useradmin; }, 1000); // 开放给同域c.html的回调方法 function onCallback(res) { alert(data from c.html --- res); } var iframe document.getElementById(iframe); // 监听a.html传来的hash值再传给c.html window.onhashchange function () { iframe.src iframe.src location.hash; }; // 监听b.html传来的hash值 window.onhashchange function () { // 再通过操作同域a.html的js回调将结果传回 window.parent.parent.onCallback(hello: location.hash.replace(#user, )); };5.window.postMessageotherWindow.postMessage(message, targetOrigin, [transfer]);window.postMessage() 方法被调用时会在所有页面脚本执行完毕之后(e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.)向目标窗口派发一个 MessageEvent 消息。 该MessageEvent消息有四个属性需要注意 message 属性表示该message 的类型 data 属性为 window.postMessage 的第一个参数origin 属性表示调用window.postMessage() 方法时调用页面的当前状态 source 属性记录调用 window.postMessage() 方法的窗口信息。 优势页面和其打开的新窗口的数据传递、 多窗口之间消息传递、嵌套的iframe消息传递的信息传递iframe idiframe srchttp://www.domain1.com/b.html styledisplay:none;iframescript var iframe document.getElementById(iframe); iframe.onload function() { var data { name: aym }; // 向domain1传送跨域数据 iframe.contentWindow.postMessage(JSON.stringify(data), http://www.domain1.com); }; // 接受domain返回数据 window.addEventListener(message, function(e) { alert(data from domain2 --- e.data); }, false);scriptscript // 接收domain的数据 window.addEventListener(message, function(e) { alert(data from domain --- e.data); var data JSON.parse(e.data); if (data) { data.number 16; // 处理后再发回domain window.parent.postMessage(JSON.stringify(data), http://www.domain.com); } }, false);script如果您不希望从其他网站接收message请不要为message事件添加任何事件侦听器。如果您确实希望从其他网站接收message请始终使用origin和source属性验证发件人的身份。当您使用postMessage将数据发送到其他窗口时始终指定精确的目标origin而不是 *6. nginx请看之前的文章 前端如何玩转Nginx7. Nodejs中间件代理中间件代理跨域相关教程请关注冰山工作室”中间件系列教程“敬请期待~参考文档阮一峰CORS MDN window.postMessage
