因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送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. [20190321]smem的显示缺陷.txt

    [20190321]smem的显示缺陷.txt1.smem 加入-m参数显示存在缺陷,map的信息不全:# smem -tk -m -U oracle -P "oraclepeis|ora_ ...

  2. IE浏览器兼容性调整总结技巧

    前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作.边调整边想感叹IE真是个沙雕..特将我遇到的问题记录下来,以及记录我的解决办法,以下问题及解决办法,都是真实可用的,本人亲测~~ 一. ...

  3. 区块链会与io域名有什么关系

    为什么区块链会与io域名有这么大的联系? 近几年,区块链成为各国央行到国内外各大商业银行.联合国.国际货币基金组织到许多国家政府研究机构讨论的热点,"区块链+"应用创新正在成为引领 ...

  4. asp.net 调用 WNetAddConnection2 window api 访问被拒绝

    通过Asp.net 程序调用局域网另外一台机器文件,显示拒绝访问,单独编写控制台程序正常. 修改iis 应用程序池标识,为管理员用户即可!!

  5. Windows Server 2016-Active Directory域服务端口汇总

    本章为大家简单整理一下有关Windows server Active Directory和Active Directory域服务(AD DS)组件的端口要求.生产环境中我们在做网络调整.防火墙或者开关 ...

  6. win10同时安装 office2016和visio2016

    一.下载镜像文件 因为office 2016和 visio2016 镜像文件是一样的,只是名称不一样,所以只需要下载一个即可. 二.下载Office 2016 Deployment Tool工具 到微 ...

  7. This network connection does not exist

    This network connection does not exist 在windows server 2008上面map了一个磁盘,共享的folder被我停止共享后,点击该磁盘的disconn ...

  8. VSCode 首次打开提示“Git installation not found.”解决方案

    ※前提大家先在本地安装好相应的git版本(下载地址:https://www.git-scm.com/download/) 一.找到“默认用户设置”

  9. Docker 从入门到实践(二)Docker 三个基本概念

    一.Docker 的三个进本概念? 了解 Docker 的三个基本概念,就可以大致了解 Docker 的生命周期. 镜像(Image) 容器(Container) 仓库(Repository) 二.镜 ...

  10. spring cloud 微服务日志跟踪 sleuth logback elk 整合

    看过我之前的文章的就可以一步一步搭建起日志传输到搜索引擎 不知道的 看下之前的文章 (1) 记一次logback传输日志到logstash根据自定义设置动态创建ElasticSearch索引 (2)关 ...