因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送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. 账号配置vue版本的扫码下单以及对店铺进行装修的步骤

    新版vue配置说明文档 管理员后台: 1.配置管理-店铺配置(子账号)-扫码点餐tab页-开启vue版 2.配置管理-店铺配置(主账号)-扫码点餐tab页-开通装修配置 商家后台: 1.主账号-门店设 ...

  2. myeclipse10 blue版激活码

    http://blog.itpub.net/27042095/viewspace-1164998/

  3. web前端(8)—— CSS选择器

    选择器 选择器,说白了就是html的标签或者其相关特性,在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的 ...

  4. NodeJS二进制包安装和快捷键配置(适用于U盘版安装配置)

    首先下载NodeJS二进制安装包:https://nodejs.org/dist/v10.15.3/node-v10.15.3-win-x64.zip 在D盘新建NodeJS文件夹,解压node-v1 ...

  5. JQuery Plugin 开发

    学习 JQuery 插件开发之后, 可以将自己平时常用的功能封装成插件, 便于在不同的项目之间使用. JQuery 官网上的 插件开发教程就很不错, 简单易懂. 参考网址: http://learn. ...

  6. 删除window10没用的服务

    最近学习了下resin,出了个问题,它默认端口是8080,跟Tomcat冲突了,我在使用的时候遇到了个奇怪的事情,resin4.0一直占用着我的8080端口,哪怕我用dos命令把它强制停止,不出五秒钟 ...

  7. 【递推】ZSC1074: 数学、阿牛的EOF牛肉串

    Description 今年的ACM暑期集训队一共有18人,分为6支队伍.其中有一个叫做EOF的队伍,由04级的阿牛.XC以及05级的COY组成.在共同的集训生活中,大家建立了深厚的友谊,阿牛准备做点 ...

  8. Linux之文档与目录结构

    Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...

  9. 【Teradata】数据库初始化(sysinit和dip工具)

    1.删除数据库对象 (1)使用root用户登录数据库节点 arcmain .LOGON 127.0.0.1/dbc,dbc_password; (2)清理所有数据库对象及数据 DELETE DATAB ...

  10. (转)ElasticSearch教程——汇总篇

    https://blog.csdn.net/gwd1154978352/article/details/82781731 环境搭建篇 ElasticSearch教程——安装 ElasticSearch ...