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)
             }
         })

     })

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")

 

服务器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>    也能在里面定义一个函数（需要两端商量好传输形式）

<script>
    function title(arg) {
        console.log(arg);
        console.log(typeof arg);
        var data=JSON.parse(arg);
        console.log(data);
        console.log(typeof data);
    }
</script>
<script src="http://127.0.0.1:8080/service/"></script>

def service(request):
    print(123)
    info = {"name": "li", "age": 20, "price": 200}
    return HttpResponse("title('%s')" % json.dumps(info))

封装好的跨域方式：

      $(".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)
             }
         })


     })