跨域解决方案

跨域解决方案

什么是跨域？

同源：

1. 相同协议
2. 相同域名（二级域名也得相同)
3. 相同端口号

三者有任何一个不同都属于不同域，凡是发送请求至不同域的url地址都是跨域通信，由于浏览器的同源策略，这种通信是不允许的。

解决方案

jsonp

原理：利用了script标签没有跨域限制的特性，通过在src的url参数上附加上回调函数名字，然后服务器返回一个包含数据的回调函数。

图像ping

原理：与1大致相同，也是利用了src标签无跨域限制的特性，缺点是只能发送get请求，也无法访问服务器的响应文本，通常用于单向通信。

CORS

CORS是XMLHttpRequest Leve 2 里规定的一种跨域方式，客户端在发Ajax请求的时候，需要额外发送Origin头部，服务器根据这个头部信息来决定是否给予响应。

客户端:Origin:http://www.nczonling.net
服务器:Access-Control-Allow-Origin:http://www.nazonling.net

如果服务器没有返回该头部，或则有这个头部但与Origin头部不匹配，浏览器就会驳回请求，注意请求和响应都不包含cookie信息。

具体实现：

1. 除了IE外，firefox 3.5+ Safari4+ chrome 的XMLHttpRequest对象实现了对CORS的原生支持，要请求另一个域中的资源，只需要在open方法中传入绝对地址就可。
2. Ie8引入了XDR（XDomainRequest)对象，能实现安全可靠的跨域通信。

如下是一个用node.js写的一个例子，来自域http://159.226.15.227:1338的页面去请求不同域http://159.226.15.227:1337不同端口的数据

//testCros1.js
var http=require('http');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/plain','Access-Control-Allow-Origin':'http://159.226.15.227:1338'});
//重点在于服务器设置响应头部，Access-Control-Allow-Origin，*和具体的域都可以
res.end("hello");
console.log("test")
}).listen(1337,'159.226.15.227');

//testCros2.js
var http=require('http');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.end(`