jsonp实现跨域请求的本质demo[无法发送post请求]

最新推荐文章于 2024-04-04 01:31:53 发布

weixin_30456039

最新推荐文章于 2024-04-04 01:31:53 发布

阅读量181

点赞数

文章标签： python

原文链接：http://www.cnblogs.com/morgana/p/7868753.html

版权

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" οnclick="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" οnclick="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" οnclick="jsonp('http://127.0.0.1:8001/get_data.html?callback=func')" value="发送jsonp请求"/>#}
<input type="button" οnclick="Jsonp2()" value="发送jsonp2请求"/>
<input type="button" οnclick="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>

转载于:https://www.cnblogs.com/morgana/p/7868753.html