• Django框架下跨域请求的实现


      既是Windows网络系统的逻辑组织单元,也是Internet的逻辑组织单元,在Windows 系统中,域是安全边界。域管理员只能管理域的内部,除非其他的域显式地赋予他管理权限,他才能够访问或者管理其他的域。每个域都有自己的安全策略,以及它与其他域的安全信任关系。

    跨域:

       就是跨域名,跨端口,跨协议。

         例如:如果有两个服务器,服务器A和服务器B,服务器A上存储了php数据,script,甚至是css这些文件,而你在服务器B上只写了html,然后你所在的服务器B上动态创建script,css,php数据(使用ajax请求),向服务器A上请求你想要的script,css,php数请求据(使用ajax)这些文件,请求这些文件后,你再在服务器B上运行你的html,虽然你的地址是在服务器B上,但是你还是可以运行效果与在服务器A上运行的效果是一样的,这样就是跨域名,跨端口,跨协议,实现了跨域。

      简单来说,就是你请求的文件,只要含有“src”,“href”这些属性,你就能在其他服务器上,请求你所需要的文件,然后在自己的服务器上运行,就实现了跨域(跨域名,跨端口,跨协议)。

    同源:

      就是同域名,同端口,同协议。

      例如:如果你有一个服务器A,你所需要的script,css,php文件都在服务器A,你写的html也在服务器A上,然后运行,出现了效果,如果你想在另一台电脑上运行你的项目(注意另一台电脑无论有没有开启服务器,效果还是会显示出来的),只要把你写在服务器A上的协议,域名,端口以及你的项目名称复制下来,在另一台电脑上运行,同样会出现相同的效果,这就实现了同源。

      简单来说,就是你的协议,域名,端口甚至项目名称都一样,不同电脑都能实现同样的效果。无论是同台电脑,还是不同台电脑,与是不是同一台电脑没有关系,都能实现跨域和同源。

     同源策略:

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

    它是由Netscape提出的一个著名的安全策略。
    现在所有支持JavaScript 的浏览器都会使用这个策略。
    所谓同源是指,域名,协议,端口相同。
    当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
    当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
    即检查是否同源,只有和百度同源的脚本才会被执行。
    如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
    跨域请求时会报错,能把请求发送到,只是返回时被浏览器拦截了。

    什么是协议,域名,端口?

    解释:假如一个网址是  http://baidu.com:8080?user=name&pwd=password

    http://   是协议   

    baidu.com  是域名(注意:前面加上“wwww”即www.baidu.com不是域名)

    8080  是端口    

    user=name&pwd=password   是地址带的参数。

    并不是所有的跨域请求都被拦截,如:img的href属性引入时,script通过网络引入js文件时。

    探索01(服务器01用8000端口,服务器02用8080端口,01向02跨域发请求):

        $(".get_service").click(function () {
    
             $.ajax({
                 url:"http://127.0.0.1:8008/service/",
                 success:function (data) {
                     console.log(data)
                 }
             })
    
         })
    服务器01
    from django.shortcuts import render, HttpResponse
    
    
    # Create your views here.
    
    def index(request):
        return render(request,"index.html")
    
    
    def service(request):
        print(123)
        return HttpResponse("a456")
    服务器02 视图函数设置

    服务器01向服务器02点提交按钮浏览器提示:

    已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:8080/service/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

    且服务器02端print(123)执行。

    探索02:

    <script src="http://127.0.0.1:8080/service"></script>

    浏览器得到提示 ReferenceError: a456 is not defined

    进行声明即可:<script>var a456;</script>    也能在里面定义一个函数(需要两端商量好传输形式)

     1 <script>
     2     function title(arg) {
     3         console.log(arg);
     4         console.log(typeof arg);
     5         var data=JSON.parse(arg);
     6         console.log(data);
     7         console.log(typeof data);
     8     }
     9 </script>
    10 <script src="http://127.0.0.1:8080/service/"></script>
    服务器01-函数接收
    def service(request):
        print(123)
        info = {"name": "li", "age": 20, "price": 200}
        return HttpResponse("title('%s')" % json.dumps(info))
    服务器02

    封装好的跨域方式:

          $(".get_service").click(function () {
    
             $.ajax({
                 url:"http://127.0.0.1:8008/service/",
                 type:"get",
                 dataType:"jsonp",     // 伪造ajax  基于script
                 jsonp: 'callbacks',
                 //jsonpCallback:"alex",
                 success:function (data) {
                     console.log(data)
                 }
             })
    
    
         })
    最后形式
  • 相关阅读:
    spring boot cli 知识点
    OSX Homebrew 安装 Spring Boot CLI
    前端重定向,index.html文件被浏览器缓存,导致整个应用都是旧的
    单页面应用,接入cdn
    Spring Cloud 之 Hystrix 知识点:隔离、熔断、降级
    Spring Cloud 之 Ribbon 知识点:服务器负载均衡
    Spring Cloud 之 Feign 知识点:封装了 REST 调用
    spring cloud 学习资料
    Gradle 知识点
    Gradle 学习资料
  • 原文地址:https://www.cnblogs.com/lixiufeng1994/p/10067389.html
Copyright © 2020-2023  润新知