ajax 跨域请求api_跨域方法的若干种方式

一、跨域的解释

那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制， a.com 域名下的js无法操作 b.com 或是 c.a.com 域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

域名

必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

深入理解跨域

特别强调两点：

第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。

二、同源策略及其限制

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。

同源策略限制内容有：

• Cookie、LocalStorage、IndexedDB 等存储性内容
• DOM 节点
• AJAX 请求不能发送

但是有三个标签是允许跨域加载资源：

• 其中 fn 是客户端注册的回调的函数，目的获取跨域服务器上的json数据后，对数据进行在处理。

5、jQuery的jsonp形式

JSONP都是GET和异步请求的，不存在其他的请求方式和同步请求，且jQuery默认就会给JSONP的请求清除缓存。

四、跨域处理方法CORS

1、CORS原理

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2、CORS优缺点

CORS要求浏览器(>IE10)和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP，只需要在服务器端做一些小小的改造即可。

header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-Methods:POST,GET");

如网站 http://localhost:63342/ 页面要请求 http://localhost:3000/users/userlist 页面，userlist页面返回json字符串格 {name:'Mr.Cao',gender:'male',career:'IT Education'}：

//在服务器端设置同源策略地址router.get("/userlist", function (req, res, next) {     var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};     res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'});     res.write(JSON.stringify(user));     res.end();  });

在头上添加 Access-Control-Allow-Origin 属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

五、跨域处理方法WebSocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。由于原生WebSocket API使用起来不太方便，Socket.io很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

//前端代码：

user input：

//Nodejs socket后台：var http = require('http');var socket = require('socket.io');// 启http服务var server = http.createServer(function(req, res) {   res.writeHead(200, {       'Content-type': 'text/html'   });    res.end();});server.listen('8080');console.log('Server is running at port 8080...');// 监听socket连接socket.listen(server).on('connection', function(client) {   // 接收信息   client.on('message', function(msg) {       client.send('hello：' + msg);       console.log('data from client: ---> ' + msg);   });   // 断开处理   client.on('disconnect', function() {       console.log('Client socket has closed.');   });});

六、跨域处理方法postMessage

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和 window.open 方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API(Cross-document messaging)。这个API为window对象新增了一个 window.postMessage 方法，允许跨窗口通信，不论这两个窗口是否同源。

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源(origin)，即"协议 + 域名 + 端口"。也可以设为 *，表示不限制域名，向所有窗口发送。

接下来我们看个例子： http://localhost:63342/index.html页面向 http://localhost:3000/message.html传递“跨域请求信息”

//发送信息页面 http://localhost:63342/index.html               跨域请求              

总结

跨域方式技术在不断变化，只谈一下现在最主流的几种方式，起到抛砖引玉的作用。