一、同源策略

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. Excel文本获取拼音

    [说明] 版本:Excel 2010 文件后缀:.xls 有在.xlsb文件下使用未成功.建议使用.xls后缀. 1.调出“开发工具” 步骤:文件-->选项-->自定义功能区-->勾 ...

  2. 【Lintcode】364.Trapping Rain Water II

    题目: Given n x m non-negative integers representing an elevation map 2d where the area of each cell i ...

  3. IntelliJ手记

    1. 配置JDK:File - Project Structure - SDKs,点击“+”即可: 2. 配置远程调试,对于azkaban的远程调试,在azkaban-solo-start.sh里面的 ...

  4. 如何得到DataTable的列名

    foreach (DataColumn dc in dtfood.Columns) { string lm = dc.ColumnName; }

  5. .NET接入微信支付(一)JS API接入 V3

    前段时间刚接完银联支付,完事后又接了微信支付,前段时间一直急着上线,微信的接入一直没有时间处理,今天我们就来整理一下微信支付的接入方法和要点. 配置: 首先呢微信支付需要通过审核,审核啥的准备工作我就 ...

  6. netty中的引导Bootstrap服务端

    引导一个应用程序是指对它进行配置,并使它运行起来的过程. 一.Bootstrap 类 引导类的层次结构包括一个抽象的父类和两个具体的引导子类,如图 8-1 所示 服务器致力于使用一个父 Channel ...

  7. Android集成友盟facebook分享

    在项目中需要将图片和视频分享到社交平台,所以集成了友盟分享.在集成facebook分享的时候走了不少弯路,现在将过程记录下来. 1.先将友盟facebook的jar包复制到项目的libs文件夹下. 2 ...

  8. Uva 213

    1. 问题 第一次发现新的存储方式,int code[8][1<<8]; 用于存储二进制的形式 将字符以是十进制的方式存储到数组中 如何消除 \n \r 的影响,进行多行的输入 2. 代码 ...

  9. mybatis 学习二 conf xml 配置信息

    xml映射配置文件      这个xml文件主要包括一下节点信息      * properties 属性      * settings 设置      * typeAliases 类型命名     ...

  10. python 基础 列表 字符串转换

    1. 字符串转列表 str1 = "hi hello world" print(str1.split(" "))输出:['hi', 'hello', 'worl ...