前端jsonp解决跨域问题
发布时间:2020-12-16 18:44:35 所属栏目:百科 来源:网络整理
导读:跨域问题的引入 在本地8000端口开启django程序,通过ajax往开启9000端口的django程序发送请求 8000端口的html文件 input type="button" value="发送1" onclick="submitJsonp1();" /script src="/static/js/jquery-3.1.1.js"/scriptscript function submitJso
跨域问题的引入在本地8000端口开启django程序,通过ajax往开启9000端口的django程序发送请求 8000端口的html文件<input type="button" value="发送1" onclick="submitJsonp1();" /> <script src="/static/js/jquery-3.1.1.js"></script> <script> function submitJsonp1() { $.ajax({ url: 'http://127.0.0.1:9000/ajax1.html',type: 'GET',data: {nid:2},success:function (arg) { $('#content').html(arg); } }) } </script> 9000端口的接口def ajax1(request): ret = {'status':True,'message': '....'} import json return HttpResponse(json.dumps(ret)) 通过上图我们可以看到请求确确实实是发过去了,也拿到了结果。但是因为浏览器的同源策略结果没有拿到8000站点的范围里。 解决方式是利用src属性的跨域属性,程序员手动创建script标签,利用src属性去发请求,拿到请求结果后删除创建的这个script标签。 自定义script标签解决跨域htmlfunction submitJsonp2() { var tag = document.createElement('script'); tag.src = 'http://127.0.0.1:9000/xiaokai.html'; document.head.appendChild(tag); document.head.removeChild(tag); } views.pydef xiaokai(request): return HttpResponse('ok') 我们发现返回的字符串已经到底script里面,此时script把ok当做一个变量,但是这个变量没有定义,所以报错。解决方式也很简单 def xiaokai(request): return HttpResponse('func("ok")') 前端多定义一个函数 function fuck(arg) { console.log(arg) $('#content').html(arg); } 此时console.log(arg) 就能正常显示字符串‘ok‘ 了 利用ajax的jsonphtmlfunction submitJsonp4() { $.ajax({ url: 'http://127.0.0.1:9000/xiaokai.html',type: 'POST',dataType: 'jsonp',jsonp: 'callback',jsonpCallback: 'func',success: function (arg) { console.log(arg) } }) } 真实发送的请求为 后端def xiaokai(request): func = request.GET.get('callback') return HttpResponse('%s("xxoo")'%func) jsonp的缺点jsonp只能发get请求,要想支持所有的请求方式,需要用到cors (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |