由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。所以ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。
浏览器同源策略并不是对所有的请求均制约：
•制约： XmlHttpRequest
•不制约： img、iframe、script等具有src属性的标签
注：自己模拟跨域，需要现在自己电脑的host文件里面添加两条域名，我这里添加的是zhangyanlin.com和aylin.com这两个域名
一、JSONP实现跨域请求
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。jsonp只能通过get方式进行跨域请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="Ajax"/> <input type="button" value="JsonpAjax"/> <script src="https://www.jb51.net/statics/jquery-1.12.4.js"></script> <script src="https://aylin.com:8002/statics/jquery.cookie.js"></script> <script> function func(arg) { console.log(arg); // 输出结果就是python代码给传过来的列表[11,22,33,] } function DoAjax() { $.ajax({ url: 'http://alex.com:8002/index', type: 'POST', data: {'k1': 'v1'}, success: function (arg) { console.log(arg); } }); } function JsonpAjax() { // var tag = document.createElement('script'); // tag.src = "http://alex.com:8002/index"; // document.head.appendChild(tag); // document.head.removeChild(tag); $.ajax({ url: "http://aylin.com:8002/index", dataType: 'jsonp', jsonpCallBack: 'func' // 对端给返回函数名，函数接收的参数是内容 }) } </script> </body> </html>
aylin.com域名这边可以给定义函数
# 采用pythontornado框架来进行的 class IndexHandler(tornado.web.RequestHandler): def get(self): self.write('func([11,22,33]);') def post(self, *args, **kwargs): self.write('t2.post')
在这里jsonp就采用script标签的src来进行跨域请求的
二、CORS
上面那种方法说到浏览器的同源策略导致ajax无法进行跨域传输，那么这种方法就可以突破浏览器限制来进行传输。当数据发送给对方域名的时候，对方已经收到，但是在返回的时候被浏览器给阻挡，我们可以写一串类似于身份证的字符串，通过浏览器的预检，从而达到数据的传输。
这方面分为简单请求和非简单请求
条件： 1、请求方式：HEAD、GET、POST 2、请求头信息： Accept Accept-Language Content-Language Last-Event-ID Content-Type 对应的值是以下三个中的任意一个 application/x-www-form-urlencoded multipart/form-data text/plain 注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求
简单请求只一次请求，而复杂请求是两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
基于cors实现AJAX请求:
1、支持跨域，简单请求
服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" /> </p> <p> <input type="submit" /> </p> <script type="text/javascript" src="https://www.jb51.net/jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.open('GET', "http://c2.com:8000/test/", true); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'GET', dataType: 'text', success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
class MainHandler(tornado.web.RequestHandler): def get(self): self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") self.write('{"status": true, "data": "seven"}')
2、支持跨域，复杂请求
由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
•“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
•“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
•“预检”缓存时间，服务器设置响应头：Access-Control-Max-Age