一、同源策略

1、简介　　

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

　　请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

　　比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据

　　浏览器上就会报错，这就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

2、实例

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

　　1）创建一个django项目一：

============= http://127.0.0.1:8000项目的index

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

</head>

<body>

<button>ajax请求</button>

<script>

    $('button').click(function () {

        $.ajax({

            url: 'http://127.0.0.1:8008/books/',

            type: 'get',

            success: function (res) {

                console.log(res)

            }

        })

    })

</script>

</body>

</html>

============= http://127.0.0.1:8000项目的views

from django.shortcuts import render

def index(request):

    return render(request, 'index.html')

　　2）创建一个django项目二：

============= http://127.0.0.1:8008项目的index

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

</head>

<body>

<button>ajax请求</button>

<script>

    $('button').click(function () {

        $.ajax({

            url: '/books/',

            type: 'get',

            success: function (res) {

                console.log(res)

            }

        })

    })

</script>

</body>

</html>

============= http://127.0.0.1:8008项目的views

from django.shortcuts import render

from django.http import JsonResponse

def index(request):

    return render(request, 'index.html')

def books(request):

    return JsonResponse(['s2-python', 's2-java'], safe=False)　

　　当点击项目二的按钮时，可以正常发送并请求到数据，但是点击项目一的按钮时，控制台会报如下错误：

Access to XMLHttpRequest at 'http://127.0.0.1:8008/books/' from origin 'http://127.0.0.1:8000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

　　但是注意，项目二中的访问已经发生了，说明是浏览器对非同源请求返回的结果做了拦截。

　　解决方式，项目二views的books函数修改如下：

def books(request):

    obj = JsonResponse(['s2-python', 's2-java'], safe=False)

    obj['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000'

    return obj

二、CORS（跨域资源共享）

1、什么是CORS（跨域资源共享）　

　　CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

　　整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

　　因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2、CORS基本流程

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求：

浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。

非简单请求：

浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

3、CORS两种请求详解

浏览器对这两种请求的处理，是不一样的。

* 简单请求和非简单请求的区别？

   简单请求：一次请求

   非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

* 关于“预检”

- 请求方式：OPTIONS

- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息

- 如何“预检”

     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过

        Access-Control-Request-Method

     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过

        Access-Control-Request-Headers

简单请求：

1.满足条件

（1）请求方法是以下三种方法之一： HEAD GET POST

（2）HTTP的头信息不超出以下几种字段： Accept Accept-Language Content-Language Last-Event-ID Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

支持跨域，简单请求

服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

非简单请求：

1.满足条件

凡是不同时满足上面两个条件，就属于非简单请求。

支持跨域，复杂请求

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

  • “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
  • “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

4、Django项目中支持CORS

在返回的结果中加入允许信息（简单请求）

def test(request):

    import json

    obj=HttpResponse(json.dumps({'name':'lqz'}))

    # obj['Access-Control-Allow-Origin']='*'

    obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'

    return obj

放到中间件处理复杂和简单请求：

from django.utils.deprecation import MiddlewareMixin

class CorsMiddleWare(MiddlewareMixin):

    def process_response(self,request,response):

        if request.method=="OPTIONS":

            #不能加*

            response["Access-Control-Allow-Headers"]="Content-Type"

        response["Access-Control-Allow-Origin"] = "http://localhost:8080"

        return response

也可以把下面这段内容放到一个py文件内当做中间件，并配置到settings里即可

同源策略与CORS跨域请求的更多相关文章

  1. 浏览器的同源策略及CORS跨域解决方案 DRF

    一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: UR ...

  2. 跨域访问 - 跨域请求 同源策略概念对跨域请求的影响 及几种解决跨域请求的方法如 jsonp

    为什么会设置同源策略 > 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核 心也最 基本的安全功能,如果缺少了同源策略,则浏览 ...

  3. jsonp突破同源策略，实现跨域访问请求

    跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...

  4. AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

    https 协议    默认端口号 443 http 协议    默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号    必须完全一致 违 ...

  5. jsonp突破同源策略，实现跨域訪问请求

    版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...

  6. 学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）

    一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...

  7. 4 伪ajax：jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  8. 浏览器同源策略与ajax跨域方法汇总

    原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...

  9. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

随机推荐

  1. 1147. Heaps (30)

    In computer science, a heap is a specialized tree-based data structure that satisfies the heap prope ...

  2. 洛谷P4721 【模板】分治 FFT（生成函数+多项式求逆）

    传送门 我是用多项式求逆做的因为分治FFT看不懂…… upd:分治FFT的看这里 话说这个万恶的生成函数到底是什么东西…… 我们令$F(x)=\sum_{i=0}^\infty f_ix^i,G(x) ...

  3. 机器学习：Jupyter Notebook中Matplotlib的使用

    一.matplotlib绘制折线图 matplotlib绘图的实质是折线图,将所有的点用直线连接起来,由于距离比较密,看起来像是个平滑的曲线: import matplotlib as mpl:加载m ...

  4. 【转】Pro Android学习笔记（四六）：Dialog（3）：对话框弹对话框

    目录(?)[-] 帮助提示框的实现 实现再弹框 再谈fragment管理器 提示框的按钮Help,将触发弹出新的帮助提示框. 帮助提示框的实现 帮助提示框的实现很简单,利用重写onCreateView ...

  5. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  6. 开发框架：AdminLTE

    ylbtech-开发框架:AdminLTE 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部 1. 2. 5.返回顶部 1. https://adminlte.io 2.   6.返 ...

  7. 第 六 课 GO语言常量

    http://www.runoob.com/go/go-constants.html 一 常量 是一个简单值的标识符,在程序运行时,不会被修改的量. 常量中的数据类型只可以是布尔型.数字型(整数型.浮 ...

  8. java注解的基本知识

    1: 注解:Annotation是一种应用于类.方法.参数.变量.构造器及包生命中的特殊修饰符,是一种由JSR-175标准选择用来描述代码的元数据. Java中如下的4种注解,专门负责新注解的创建: ...

  9. linux普通用户home目录锁定

  10. C#设计模式(8)——桥接模式

    一.概念 桥接模式即将抽象部分与实现部分脱耦,使它们可以独立变化. 二.模型 三.代码实现 // 客户端调用 // 类似Web应用程序 class Client { static void Main( ...