跨站请求(同源策略)

什么是跨域?它是干什么的?

所谓的跨域就是跨领域,就是我在我的服务器本地,需要请求你的服务器本地的文件,这就是跨域,

那它是干什么的呢?我们是两个服务器,不同的ip不同的端口不同的url路由,而我想要请求你的数据,这就是它的作用以及需要解决的需求,我们的很多的网站里面的那些图片的地址都是跨站请求的,并不都是本地自己存放的数据如图所示:

要了解跨域还有一个概念需要理清楚,就是同源,既然跨域是跨度到其他的领域地址里面的话,那么不跨域也就是在我们自己本地获取数据,不跨域有一个专业名词叫做同源,

所谓的同源是指同一的域名,ip,端口,协议.

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

同源策略它是有Netscape提出的一个著名的安全策略.现在所有支持Javascript的浏览器都会使用这个策略,当一个浏览器的两个tab页中分别打开百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行,如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问.

如下所示的异常:

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

要实现跨域有很多的方法,我们这里先把最简单的拿出来,后面再补充这个最简单的步骤是如何得来的,它是有一个逻辑一层一层递进的,一步步到这个结果的.

我们的跨域代码：

需要有两个项目同时启动,然后使用不一样的端口,这样是模拟两个服务器,

url路由系统配置[我们的两个程序的路由都是一样的]:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^ajax_send', views.ajax_send),
]

views视图函数[两个程序的views函数也是一样的]:

from django.shortcuts import render, HttpResponse


# Create your views here.
def index(request):
    return render(request, 'home.html')


def ajax_send(request):

    func = request.GET.get('callback')
    print("func", func)
    res = {'name': "多啦A梦"}
    import json
    return HttpResponse("%s('%s')" % (func, json.dumps(res)))

HTML[两个程序的前端代码也是一样的]:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h2>there is second page</h2>
<button class="second">多啦A梦</button>
<script>

    $(".second").click(function(){
        $.ajax({
            url:"http://127.0.0.1:8010/ajax_send/?callback", //这里请求的是另一个程序的url后面的?callback是固定语法
            dataType:"jsonp", //这里的dataType:"jsonp"也是固定语法,
            jsonp:"callback", //同上固定语法
            success:function(data){  //固定语法
                alert(data)  //这里就是把我们的数据从后端发过来然后进行逻辑处理,这里的
            }

        })
    })

</script>
</body>
</html>

既然那么多都是一样的,唯一不一样的就是端口了,

我们是从A的HTML代码里面把数据传给B的后端代码去处理,然后我们的B的后端再把数据处理了之后返回给A的前端的js代码去处理,这样就实现了我们的跨域请求,

也就是后端和前端的交互是交叉的,这样就实现了跨域,然后再配合上固定的语法和逻辑在里面就可以了

posted @ 2018-03-02 09:45 dream-子皿阅读(318) 评论(0) 收藏举报

刷新页面返回顶部

孟郊

跨站请求(同源策略)

公告