跨域的两种简单实现方式

是什么导致了跨域?

是因为浏览器的同源策略是对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+"\n "+data.tel);
              }
          }); 

JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据。


JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

 

 同源策略对照表

简单的说,不同姓的人,互相只能通过接口访问,不能查看对方的私有信息比如你雇三个人帮你装修,你们的交互也只能限于你告诉他做什么,他帮你工作,但不能互相打探老婆漂不漂亮

 

posted @ 2018-03-09 10:20 前方、有光 阅读(...) 评论(...) 编辑 收藏