zoukankan      html  css  js  c++  java
  • 跨域的两种简单实现方式

    是什么导致了跨域?

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

     

     同源策略对照表

    简单的说,不同姓的人,互相只能通过接口访问,不能查看对方的私有信息比如你雇三个人帮你装修,你们的交互也只能限于你告诉他做什么,他帮你工作,但不能互相打探老婆漂不漂亮
  • 相关阅读:
    python 全栈基础作业题
    计算机基础之二:操作系统的发展史
    计算机基础系列之一:计算机硬件概述
    饼图
    折线图
    win_diy_monkey demo
    csv,Excel
    uiautomator2
    win ui自动化测试
    html
  • 原文地址:https://www.cnblogs.com/52-qq/p/8532422.html
Copyright © 2011-2022 走看看