上一篇《Java跨域原理》我们回顾了一下跨域的基础知识和原理，今天我们看一下实例。实例详解
在本地玩起来，修改hosts文件增加如下的几个域名绑定作为测试:
127 .0.0.1source.test.com
127 .0.0.1target.test.com
127 .0.0.1source.test.org
127 .0.0.1target.test.org
本文所有实例都可以在 这里下载
动态不受限标签JSONP源域 source.test.com/source-client.html<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>jsonp Test </title><type="text/java"> // function JSONPCallback(){// console.log(arguments[0])// }// function load(url){// var = document.(''); // .src = url;// document.head.();// }// load("http://target.test.org:9000/getData.do?callback=JSONPCallback")//下面这个是jQuery风格的JSONP,更容易理解functiongetJSON(url,callback){ var = document.(''); varcallbackName = "ProxyFunc_"+ (newDate().getTime()) window[callbackName] = function(){ callback(arguments[0]); }; . = .onratechange = function(){ if(this.readyState == 'complete'){ window[callbackName] = null; } } .src = url.replace("JSONPCallback",callbackName); document.head.(); } getJSON("http://target.test.org:9000/getData.do?callback=JSONPCallback",function(data){ console.log(data) }) </></head><body></body></html>目标域 target.test.org:9000varhttp = require( "http"); varurl = require( "url"); varserver = newhttp.Server();server.listen( 9000);server.on( "request", function(request,response){ varparamDict = url.parse(request.url, true).query; varcallback = paramDict.callback varretData = callback + '('+ '{"status":"success",data:{"name":"test JSONP"}}'+ ')'; response.end(retData);}); 操作方法
打开源域页面，在控制台查看拿到的数据
Form提交
这个我不会写~
window.name源域 source.test.com/source.html<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>window.name test </title><type="text/java"> window.name = "source shared windowname"alert(window.name) window.location.href = "http://target.test.org/target.html"</></head><body></body></html>目标域 target.test.org/target.html<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>window.name test </title><type="text/java"> alert(window.name) </></head><body></body></html>操作
打开源域页面看 即使跳转到目标域 数据依然存在
document.domain源域 source.test.com/source.html<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>document.domain test </title></head><body><iframesrc="http://target.test.com/target.html"></iframe></body><type="text/java"> document.domain = "test.com"; window. = function(){ vardoc = window.frames[0].document; console.log(doc.getElementById('tid').outerHTML); console.log(doc.body.innerHTML) setTimeout(function(){ doc.body.innerHTML = "data from source.test.com"},3000) } </></html>目标域 target.test.com/target.html<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>document.domain test </title><type="text/java"> document.domain = "test.com"</></head><body><pid="tid">data of target.test.com </p></body></html>操作
打开源域页面 查看源域操作目标域dom情况
CORS源域 source.test.com/client.html 源代码<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>cross doamin resource sharing test </title><type="text/java"> varxhr = new(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4&& xhr.status == 200){ console.log(xhr.responseText) } } xhr.open('POST','http://target.test.org:9000/getInfo.json',true) xhr.send(); </></head><body></body></html>目标域 target.test.org:9000varhttp = require( "http"); varserver = newhttp.Server();server.listen( 9000);server.on( "request", function(request,response){ //不加这个相应头，客户端会报错，无法跨越发请求response.setHeader( "Access-Control-Allow-Origin", "http://source.test.com") response.writeHead( 200,{ "Content-Type": "text/html;charset=UTF-8"}); response.write( 'msg: "cross origin by cors"'); response.end();}); 操作方法
将两个文件部署上
浏览器打开源域的页面
在控制台和网络请求中查看交互数据
postMessage
源域的页面嵌入加载了目标域的页面，并在两个域之间进行通信。
源域 source.test.com/source.html 源代码：<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>postMessage Test Source </title><type="text/java"> window.addEventListener('message',function(evt){ console.log('source getmessage:',evt.data); evt.source.postMessage('##source message##',evt.origin); }); </></head><body><iframesrc="http://target.test.org/target.html"></iframe></body></html>目标域 target.test.org/target.html 源代码:<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>postMessage Test Source </title><type="text/java"> window.addEventListener('message',function(evt){ console.log('target getmessage:',evt.data); }); window.parent.postMessage('##target message##','http://source.test.com'); </></head><body></body></html>操作方法
将两个文件部署上
浏览器打开源域的页面
在控制台可以看到两个页面交互的信息
WebSocket
源域的页面中的脚本在页面加载时向目标域的服务发送信息，并接受服务返回的信息。
目标域 target.test.org:9000 源代码：varWebSocketServer = require( 'ws').Server; varsocketServer = newWebSocketServer({ port: 9000});socketServer.on( 'connection', function(websocket){ websocket.on( 'message', function(message){ console.log( newDate().getTime(), ' received ',message) websocket.send( '###'+ message + "###") });}) 源域 source.test.com/index.html 源代码：<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>WebSocket Cross Origin Test </title><type="text/java"> varwebsocket = newWebSocket("ws://target.test.org:9000"); websocket.onopen = function(){ console.log('websocket opened'); websocket.send('I am opened'); } websocket.onmessage = function(evt){ console.log('recevie message') console.log(evt.data) } websocket.onclose = function(){ console.log('websocket closed') } websocket. = function(){ console.log('websocket meets error') } </></head><body></body></html>操作方式
npm install ws
node 启动目标域的socket server
浏览器打开源域的页面
在控制台可以看到客户端和服务端交互的消息
参考资料
RFC 6454 The Web Origin Concept(https://tools.ietf.org/html/rfc6454)
W3C 同源策略(https://www.w3.org/Security/wiki/Same_Origin_Policy)
MDN CORS(https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)
《Web之困-现代Web应用安全指南》
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » hosts一个ip对应多个域名写法(host 一个域名对应多个ip)
1 评论