浏览器的同源策略:不能跨越网站请求信息;html
XMLHttpRequests遵循这个规定。ajax
所以ajax等基于XML的都不能进行跨站请求django
而咱们知道img,iframe,script等拥有src属性的能够进行跨站请求,json
而利用这些标签进行的跨站方式成为jsonp跨域
以script为例:浏览器
function submitJsonp2() { var tag = document.createElement('script'); tag.src = 'http://127.0.0.1:9000/xiaokai.html'; document.head.appendChild(tag); document.head.removeChild(tag); } function fuck(arg) { //进行操做 $('#content').html(arg); }//而请求发回的会是保存在js文件内,// 所以咱们以相似函数调用的方式把信息看成参数传递给本地接收参数的函数,进行操做// 此处的func名由服务端生命
function submitJsonp4() { $.ajax({ url: 'http://127.0.0.1:9000/xiaokai.html', type: 'POST', dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'func' }) } function func(arg) { console.log(arg); }基于ajax操做当声明dataType:jsonp会以另一种,不一样于XML的方式发送,//并且返回的函数名有本身规定
import json def service(request): info = {'name':'alex','age':34,'price':200} func = request.GET.get('callbacks') # jQuery21405849947152306905_1529041780670 return HttpResponse("%s('%s')"%(func,json.dumps(info)))
告诉浏览器 不用拦截了。
# response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8003" response['Access-Control-Allow-Origin'] = "*" # 高速浏览器 那些域名不拦截
CORS须要浏览器和服务器同时支持。目前,全部浏览器都支持该功能,IE浏览器不能低于IE10。服务器
整个CORS通讯过程,都是浏览器自动完成,不须要用户参与。对于开发者来讲,CORS通讯与同源的AJAX通讯没有差异,代码彻底同样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感受。app
所以,实现CORS通讯的关键是服务器。只要服务器实现了CORS接口,就能够跨源通讯。ide
浏览器将CORS请求分红两类:简单请求(simple request)和非简单请求(not-so-simple request)。函数
只要同时知足如下两大条件,就属于简单请求。
(1) 请求方法是如下三种方法之一: HEAD GET POST (2)HTTP的头信息不超出如下几种字段: Accept Accept-Language Content-Language Last-Event-ID Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不一样时知足上面两个条件,就属于非简单请求。
浏览器对这两种请求的处理,是不同的。
* 简单请求和非简单请求的区别? 简单请求:一次请求 非简单请求:两次请求,在发送数据以前会先发一次请求用于作“预检”,只有“预检”经过后才再发送一次请求用于数据传输。 * 关于“预检” - 请求方式:OPTIONS - “预检”其实作检查,检查若是经过则容许传输数据,检查不经过则再也不发送真正想要发送的消息 - 如何“预检” => 若是复杂请求是PUT等请求,则服务端须要设置容许某请求,不然“预检”不经过 Access-Control-Request-Method => 若是复杂请求设置了请求头,则服务端须要设置容许某请求头,不然“预检”不经过 Access-Control-Request-Headers
支持跨域,简单请求
服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'
支持跨域,复杂请求
因为复杂请求时,首先会发送“预检”请求,若是“预检”成功,则发送真实数据。
中间件配置
from django.utils.deprecation import MiddlewareMixin class CORSMiddleware(MiddlewareMixin): def process_response(self,request,response): # 容许你的域名来访问 response['Access-Control-Allow-Origin'] = "*" if request.method == 'OPTIONS': # 容许你携带 Content-Type 请求头 不能写* response['Access-Control-Allow-Headers'] = 'Content-Type' # 容许你发送 DELETE PUT请求 response['Access-Control-Allow-Methods'] = 'DELETE,PUT' return response