跨域的两种简单实现方式

是什么导致了跨域？

是因为浏览器的同源策略是对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 数据。

 同源策略对照表

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