因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送http请求

浏览器的同源策略(SOP/same origin policy)是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS(跨站脚本攻击 cross site scripting)和CSRF(跨站请求伪造cross-site request forgery)等攻击。

(同源 origin:协议,域名,端口号,不清楚的话,直接在浏览器控制台中输入window.location.origin看看返回值就知道了。)

下面两种情况,是不受跨域限制的,严格来讲,这两种情况只是跨站资源请求:

  1)页面中的链接,重定向及表单提交是不受同源策略限制的

  2)跨域资源的引入,如<script src=""> <image src=""> <iframe>等

从上面的第二种情况,我们可以发现,但凡通过src去获取非同源状态的资源时,都是不受跨域限制的,那我们就可以想想,是否可以借助这种跨站资源请求的方式来实现http跨域请求呢?这就是我们接下来要说的第一种跨域解决方案:jsonp

1、JSONP(不仅限于python,所有的GET请求都可以使用jsonp实现跨域)

  1)实现原理:

    从上面的分析我们已经知道,web页面上请求跨站资源请求是不会受到同源策略限制的,所有我们会想,我们可不可以在服务器上想办法把web端需要的数据装进一个js文件里面,然后让web端直接访问这个js文件,从而获取需要的数据呢?恰巧我们知道有一种叫做json的数据格式,且js原生支持,所以web端就可以通过像访问js脚本一样的方式,来调用跨域服务器上动态生成的js文件。

    为了便于客户端使用数据,逐渐形成一种非正式传输协议:JSONP。JSONP的一个要点就是,传给服务器一个callback参数,然后服务器返回数据时,将这个callback参数作为函数名来包裹住json数据

  2)jsonp实例

    在远程服务器上新建一个remote.js文件:

    HandleRemote({"title":"哈哈", "name":"我是一个测试数据哦!"})

    在本地新建html文件:

    function HandleRemote(data){

      console.log(data.title+data.name);

    }

    <script type="text/javascript" src="远程服务器地址/remote.js">

    运行本地文件,在浏览器的控制台可以看到 哈哈我是一个测试数据哦! 的输出

    到现在我们已经实现了去服务器上获取数据,剩下还有两个问题需要我们思考:

    a、我们如何让远程服务器知道他要调用的本地函数回调函数的名字是什么?

    b、我们如何在远程服务器上动态生成js脚本

    有了思路就很好办了,先看第一个问题:

    我们如何让服务器知道我们本地的回调函数名?告诉他就行了啊,在请求中加上我们的函数名,然后让远程服务器根据我们的参数取动态生成js脚本调用函数名即可!

    前端实现

    var url = "http://test.com/getRemoteDate?callback=HandleRemote"

    var script = document.createElement("script");

    script.setAttribute("src", url)

    document.getElementByTagName("head")[0].appendChild(script);

    最后将上面的代码封装成通用的ajax形式:

    url = "http://test.com/getRemoteDate/";

    $.ajax({

      url:url,

      type:"GET",

      dataType:"JSONP",

      jsonp:"callback", #将会作为参数传给服务器,用于获得回调函数的参数名

      jsonCallback:"test", # 自定义的jsonp的回调函数参数名,默认为jQuery自动生成的函数名,也可以自定义,jQuery会自动为你处理的。

      success:function(data){

        此处data即为返回的json数据了,前端根据需要自行处理

      } 

    });

    服务端代码

    def getData():

      return {"title":"哈哈", "name":"这又是一个测试数据哦!"}

    def getRemote(request):

      funcName = request.GET.get("callback")

      result = getData()

      # 将结果以json形式返回,与前端的jsonp交互

      return funcName+"("+json.dumps(result)+")"

    配置url: url(r"^getRemoteData/$", getRemote)

   到这里,jsonp就完成了,虽然jsonp不受同源策略的限制,但是jsonp有个问题,就是它只支持GET请求,其他请求不支持。

2、在响应头加上响应的允许跨域的参数,告诉浏览器当前请求被服务器接受,这种跨域方式也是通用的。

  

3、python Django中最常用的另一种处理跨域的方式:

  使用Django提供的 Django-cors-headers 来处理跨域

  从GitHub上面下载Django-cors-headers

  pip install Django-cors-headers.zip

  在settings.py中的中间件中配置 【'corsheaders.middleware.CorsMiddleware',】记得这个中间件一定要写在CSRF之前,为了方便处理,一般写在最前面

  设置 CORS_ORIGIN_ALLOW_ALL = True,即允许所有的跨域请求,当然,这里也可以设置为False,然后配合 CORS_ORIGIN_WHITELIST 白名单来使用

  如此,我们的跨域处理即完成,支持所有的请求。

python 跨域处理方式的更多相关文章

  1. 基于jQuery的Jsonp跨域[Get方式]

    由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...

  2. 跨域问题解决方式(HttpClient安全跨域 &amp; jsonp跨域)

    1 错误场景 今天要把项目部署到外网的时候,出现了这种问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 执行 都没有问题的, 一旦把我须要调用接口的项目B放到其它的server上, ...

  3. JS跨域解决方式 window.name

    window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等 ...

  4. JavaScript跨域解决方式

    平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种: 1.jsonp解决跨域问题 客户端代码: <!DOCTYPE html> <ht ...

  5. js跨域解决方式

    什么是跨域? 概念:仅仅要协议.域名.port有不论什么一个不同,都被当作是不同的域.(所谓同源是指,域名.协议,port同样.),对于port和协议的不同,仅仅能通过后台来解决. URL 说明 是否 ...

  6. 跨域请求方式之Jsonp形式

    在浏览器端才有跨域安全限制一说,而在服务器端是没有跨域安全限制的. 在两个异构系统(开发语言不同)之间达到资源共享就需要发起一个跨域请求. 而浏览器的同源策略却限制了从一个源头的文档资源或脚本资源与来 ...

  7. [转]JS跨域解决方式 window.name

    本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...

  8. 前端JavaScript实现跨域的方式(转)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

随机推荐

  1. Apache Windows下Apache安装步骤

    1.apache官网下载Apache HTTP Server服务器 我相信有些朋友刚用apache服务器时,都希望从官网上下载,而面对着官网上众多的项目和镜像以及目录,也许有点茫然.下面是具体步骤: ...

  2. c/c++ 编译器提供的默认6个函数

    c/c++ 编译器提供的默认6个函数 1,构造函数 2,拷贝构造函数 3,析构函数 4,=重载函数 5,&重载函数 6,const&重载函数 #include <iostream ...

  3. 【算法】LeetCode算法题-Count And Say

    这是悦乐书的第153次更新,第155篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第12题(顺位题号是38).count-and-say序列是整数序列,前五个术语如下: ...

  4. js FormData方法介绍

    1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 2. 构造函数 创建一个formData ...

  5. maven中可以直接引用的java系统属性和环境变量属性

    一.查看命令: 1 mvn help :system 二.引用 在pom文件中通过 ${变量名}来引用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  6. 获取WebApplicationContext的几种方式

    加载WebApplicationContext的方式 WebApplicationContext是ApplicationContext的子接口,纵观Spring框架的几种容器,BeanFactory作 ...

  7. ES6+Vue+webpack项目,在ie11中请求后台接口后数据更新,但是页面没有刷新?

    因为ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Da ...

  8. linux学习笔记整理(四)

    第五章 Vim编辑器和恢复ext4下误删除的文件-Xmanager工具本节所讲内容:5.1 vim的使用5.2 实战:恢复ext4文件系统下误删除的文件5.3 实战:使用xmanager等远程连接工具 ...

  9. https验证证书的三个级别

    一.无条件信任证书 1. func urlSession(_ session: URLSession, didReceive challenge: URLAuthenticationChallenge ...

  10. UVA11212-Editing a Book(迭代加深搜索)

    Problem UVA11212-Editing a Book Accept:572  Submit:4428 Time Limit: 10000 mSec  Problem Description ...