是什么导致了跨域?
是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截。
跨域的原因:比如你在百度工作,但是你需要一些京东的数据,此时就用到了跨域
解决跨域的两种方式:jsonp,cors(跨站资源共享)
简单请求和复杂请求
条件: 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 注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求
区别:
简单请求:一次请求
非简单请求:两次请求,在发送数据之前会先发第一次请求做‘预检’,只有‘预检’通过后才再发送一次请求用于数据传输。
预检:先让option预检是否合格,合格才交给响应的视图去处理,不合格直接拦截
CORS的优点:可以发任意请求
CORS的缺点:上是复杂请求的时候得先做个预检,再发真实的请求。发了两次请求会有性能上的损耗
jsonp和cors的区别(jsonp在前端处理,即放jspon请求,cors在后端处理)
JSONP:服务端不用修改,需要改前端。发jsonp请求
JSONP:只能发GET请求
CORS:前端的代码不用修改,服务端的代码需要修改。如果是简单请求的话在服务端加上一个响应头。
CORS:可以发任意请求
预检这里的工作其实可以交给中间件去完成,否则需要写太多的重复代码
class RequestMiddleware(MiddlewareMixin): def process_request(self, request): request.META["Access-Control-Allow-Origin"] = "*" # 中间件配置,允许所有的请求头过来
print("=======中间件操作=========》")
jsonp请求实例 $.ajax({ type: "get", async:false, url: "http://192.168.1.102:8080/carop/jsonp", dataType: "jsonp", jsonpCallback:"jsonpCallback", success: function(data){ alert(data.name+" "+data.tel); } });
JSONP实现跨域请求的原理简单的说,就是动态创建<script>
标签,然后利用<script>
的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
同源策略对照表
简单的说,不同姓的人,互相只能通过接口访问,不能查看对方的私有信息比如你雇三个人帮你装修,你们的交互也只能限于你告诉他做什么,他帮你工作,但不能互相打探老婆漂不漂亮