views.py

def get_data(request):

    return HttpResponse("机密数据")

urls.py

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^(?P<version>\w+)/users/$', views.UsersView.as_view(),name='xxxx'),

    url(r'^index/',views.IndexView.as_view()),

    url(r'^get_data.html$', views.get_data),

]

In [2]: import requests

In [3]: res=requests.get('http://127.0.0.1:8001/get_data.html')

In [4]: res

Out[4]: <Response [200]>

In [5]: res.text

Out[5]: '机密数据'

通过发送requests请求时无限制

通过axios ajax 浏览器会限制返回

Failed to load http://127.0.0.1:8001/get_data.html:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

绕过浏览器的同源策略 即只能在当前域发请求，跨域就被浏览器限制

ajax受同源策略限制 但是有src属性的标签不受同源策略

img,script,iframe[伪造ajax请求],

<iframe src="http://www.autohome.com.cn" style="weight:'1000px';height:'2000px'"></iframe>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://127.0.0.1:8001/get_data.html"></script>

</head>

但是会提示错误

get_data.html:1 Uncaught ReferenceError: 机密数据 is not defined

    at get_data.html:1

1修改服务端

def get_data(request):

    return HttpResponse("alert(1)")

结果

客户端成功执行alert(1)

可以拿到数据但是没法使用

2.jsonp方式

手动版

客户端:先定义函数

服务端func('数据')

服务器端views code

def get_data(request):

    return HttpResponse("func('机密数据')")

客户端index.html

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function func (arg) {

            console.log(arg)

        }

    </script>

    <script src="http://127.0.0.1:8001/get_data.html"></script>

</head>

可以拿到数据

手动实现jsonp

函数名由客户端决定

服务端

def get_data(request):

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

    return HttpResponse("%s('机密数据')" %func_name)

客户端

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<h1>测试跨域</h1>

<input type="button" onclick="jsonp('http://127.0.0.1:8001/get_data.html?callback=func')" value="发送jsonp请求"/>

<body>

<script src="../static/jquery-3.2.1.js"></script>

<script>

function func(arg) {

    alert(arg);

     document.head.removeChild(tag);

}

function jsonp(url) {

    tag= document.createElement('script')

    tag.src=url;

    document.head.appendChild(tag);

}

</script>

</body>

</html>

3jquey默认支持jsonp

本质就是动态创建script标签

返回函数名 服务端自动包裹数据

客户端

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<h1>测试跨域</h1>

<input type="button" onclick="Jsonp2()" value="发送jsonp2请求"/>

<body>

<script src="{% static 'jquery-3.2.1.js' %}"></script>

<script>

function test(arg) {

}

function Jsonp2() {

    $.ajax({

        url:"http://127.0.0.1:8001/get_data.html",

        type:"GET",

        dataType:'JSONP',

{#        callback:test#}

        success:function (data) {

            console.log(data);

        }

    })

}

</script>

</body>

</html>

4客户端调整

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<h1>测试跨域</h1>

{#<input type="button" onclick="jsonp('http://127.0.0.1:8001/get_data.html?callback=func')" value="发送jsonp请求"/>#}

<input type="button" onclick="Jsonp2()" value="发送jsonp2请求"/>

<input type="button" onclick="Jsonp3()" value="发送jsonp3请求"/>

<body>

<script src="{% static 'jquery-3.2.1.js' %}"></script>

<script>

function list(arg) {

 console.log(arg)

}

function Jsonp3() {

    $.ajax({

        url:"http://www.jxntv.cn/data/jmd-jxtv2.html",

{#        http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list#}

        type:"GET",

        dataType:'JSONP',

        jsonp:'callback',

        jsonpCallback:'list'

    })

}

</script>

</body>

</html>

　　

jsonp实现跨域请求的本质demo[无法发送post请求]的更多相关文章

  1. 关于使用Jsonp做跨域请求

    今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. 使用jsonp进行跨域请求

    使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...

  3. jsonp原理,跨域请求头处理

    一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...

  4. 跨域解决方案二：使用JSONP实现跨域

    跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...

  5. 转（JSONP处理跨域事件）

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  6. 使用JSONP实现跨域

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...

  7. JSONP解决跨域问题，什么是JSONP（转）

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

  8. 用jsonp 解决跨域问题

    想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 将获取的txt 文件 展示出 ...

  9. jsonp 实现跨域

    为什么会出现跨域问题 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面 ...

随机推荐

  1. java学习小笔记（三.socket通信）【转】

    三,socket通信1.http://blog.csdn.net/kongxx/article/details/7288896这个人写的关于socket通信不错,循序渐进式的讲解,用代码示例说明,运用 ...

  2. 获取浏览器的相关信息(navigator)

    * 智能机浏览器版本信息: * */ var browser = { versions: function() { var u = navigator.userAgent + navigator.ap ...

  3. Linux文件压缩/打包/解压

    在Linux日常维护中,经常需要备份同步一些比较重要的文件,而在传输过程中如果文件比较大往往会非常慢,而且还会非常占用空间,这时候就需要我们使用压缩工具对大文件进行压缩打包,下面我们来介绍一下常用的压 ...

  4. asp.net 服务器控件 JS验证

    ` //使用 OnClientClick="return checkselect()" function checkselect() { //验证下拉必选 var value = ...

  5. Ceph的现状

    转自:https://www.ustack.com/blog/ceph-distributed-block-storage/ 1. Ceph简介 Ceph是统一分布式存储系统,具有优异的性能.可靠性. ...

  6. Element 'beans' cannot have character [children], because the type's content type is element-only

    这个小问题快搞死我了,找了大半个小时. Element 'beans' cannot have character [children], because the type's content typ ...

  7. Tomcat部署项目后有括号的处理方法

    常见的问题,收录整理了一下,方便查找. 如下3个地方都修改为一致即可解决. 1,右键项目名 --> properties --> 输入web project settings --> ...

  8. Reinforcement Learning Q-learning 算法学习-2

    在阅读了Q-learning 算法学习-1文章之后. 我分析了这个算法的本质. 算法本质个人分析. 1.算法的初始状态是随机的,所以每个初始状态都是随机的,所以每个初始状态出现的概率都一样的.如果训练 ...

  9. BZOJ - 3631 松鼠的新家 (树链剖分)

    题目链接 树链剖分基础题,路径权值修改+差分 #include<bits/stdc++.h> using namespace std; typedef long long ll; ; in ...

  10. 网络爬虫必备知识之concurrent.futures库

    就库的范围,个人认为网络爬虫必备库知识包括urllib.requests.re.BeautifulSoup.concurrent.futures,接下来将结对concurrent.futures库的使 ...