同源策略
之所以出现跨域就是因为有同源的限制
同协议 同域名 同端口 在能获取资源在同源策略下 域名A下可以访问域名B下的脚本 css 和图片 但是A不能向B发起Ajax请求。
跨域的解决方法
使用CORS
使用CORS（跨域请求资源共享Cross-Origin Resource Sharing）是跨域资源请求机制，它要求当前服务器（存放资源）在响应的报头中添加 Access-Control-Allow-Origin标签 从而指定当前服务器可以被跨域访问
res.setHeader("Access-Control-Allow-Origin","*");
服务器
var http=require('http');
http.createServer(function (req,res) {
res.setHeader("Access-Control-Allow-Origin","*");
res.end("OK");
}).listen(1234);客户端
$.ajax({url:"http://127.0.0.1:1234/",success:function (data) {
$("div").text(data)
}})在前端页面会显示 OK
但是 默认的cors只支持get和post请求。
关于 cors的详细理解可以查看 我的而另一篇文章 https://segmentfault.com/a/11...
Html5的解决方案-Cross-document messaging
使用postMessage（发送数据）方法和onMessage(接收数据) 事件来传送不同域之间的通信
子页面
var ifr=window.parent;
var targeOrigin='http://localhost:63342/reactWork';
ifr.postMessage("asa1111",targeOrigin);父页面
<iframe style="display: none" id="ifr" src="http://localhost:63342/reactWork/index2.html"></iframe>
<script type="text/javascript">
window.addEventListener('message',function (event) {
console.log(event)
if(event.origin=='http://localhost:1234'){
console.log(event.data) //会输出event的数据
}
},false)
</script>实现了子页面向父页面发送消息ifr.postMessage()
在父页面接收消息 window.addEventListener("message",function(){})
Html5的解决方案-WebSocket
WebSocket protocol 是h5的新协议 实现了浏览器与服务器的双工通信，同时允许跨域通信
下面是WebSocket同新的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js"></script>
<script src="socket.io-1.3.4.js"></script>
</head>
<link rel="stylesheet" href="style.css">
<body>
<h1>sjaisja</h1>
<button onclick=Send()>dadasds</button>
<input type="text" id="test1">
<script type="text/javascript">
var ws=new WebSocket("ws://localhost:8181")
ws.onopen=function () {
console.log("Socket 打开")
}
ws.onmessage=function (msg) {
$("h1").html(msg.data)
}
function Send() {
ws.send($("#test1").val())
}
</script>
</body>
</html>客户端的代码
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
console.log("开始连接")
ws.on('message', function (message) {
console.log(111)
ws.send(message)
})
});nodejs服务器端的代码 实现了浏览器和服务器的 等位通信
JSONP
主要是利用 Script标签不受同源限制的特性，向跨域服务器请求发挥一段JSON数据
常规前后端会约定好某个JSON 请求的callBack包裹起来。进而方便服务器区分收到的请求，也方便客户端区分收到的响应。
客户端
<script type="text/javascript">
$.ajax({
url:"http://127.0.0.1:1234/",
dataType:"jsonp",
jsonCallback:'abc',
success:function (data) {
console.log(data)
}
})
</script>服务器
var http=require("http");
var urllib=require("url");
var data={"name":"111","addr":"222"};
http.createServer(function (req,res) {
res.writeHead(200,{'Content-type':'text/plain'});
var params=urllib.parse(req.url,true);
if(params.query&¶ms.query.callback){
console.log(params.query,params.query.callback)
var str=params.query.callback+'('+JSON.stringify(data)+')';
console.log(str)
res.end(str);
}else{
res.end(JSON.stringify(data));
}
}).listen(1234)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。