JSONP、CORS、跨域

1、JSONP

 

 Ajax 存在问题：访问自己域名URL：没问题
               访问其他域名URL： 被阻止
        因为浏览器遵循(禁止ajax跨域)：同源策略，所以当Ajax跨域发送请求后，再返回时浏览器会拒绝接收。
        但是允许带有 src 的地址进行跨域(大部分。例：scr=xxx)。script 标签没禁止
       发送时：
           把数据拼接成 script代码 放在html
           <script src='http://www.baidu.com?p=1&name=xx'></script>

 

 

JSONP 跨域两点实现：
 1、客户端：
       URL?callback=funcname  # 客户端发送请求时的GET URL 上传参 自定义的函数名
       定义函数名 ：  function funcname(arg){……}

 2、服务端：
       funcname = request.GET.get('callback') # 服务端先获取到客户端的函数名
       在用于返回执行给客户端 return： funcname(数据)

例子：
客户端1： 自创建script标签
 <body>
 <input type="button" value="获取用户列表" onclick="getUsers()">
 <ul id="user_list">

 </ul>

 <script>
     function getUsers() {
         var tag = document.createElement('script')
         tag.src = 'http://www.baidu.com:8001/users/?callback=bbb'
         document.head.appendChild(tag)
     }

     function bbb(arg) {
         console.log(arg)

     }
 </script>


 </body>

客户端2： Jquery 方式
 <script src="/static/jquery-3.3.1.js"></script>
 <script>
     $.ajax({
         url:'http://www.baidu.com:8001/users/',
         type:'GET',  # 只能用 GET 方式，用其他方式也是用GET方式
         dataType:'JSONP',
         jsonp:'callback',    # callback = bbb
         jsonpCallback:'bbb'


     })

 </script>


服务端：
 import json
 def users(request):
     v = request.GET.get('callback')
     user_list = [
         'wenming','benz','ok'
     ]
     user_list_str = json.dumps(user_list)
     temp = "%s(%s)"%(v,user_list_str)
     print(temp)
     return HttpRequest(temp)


 pycharm 设置python通过指定域名访问
 ALLOWED_HOSTS = ['http://www.s4.com',]

总结： JSONP 只能通过 GET 方式请求


2、跨站资源共享 CORS

 

简单请求：
 def users(request):
     user_list = [
         'wenming','benz','ok'
     ]
     user_list_str = json.dumps(user_list)
     obj = HttpResponse(user_list_str)

     # CORS 返回值时，设置响应头如下即可
     obj['Access-Control-Allow-Origin'] = "http://被允许请求进来的URL：8000"
     # obj['Access-Control-Allow-Origin'] = "*" # 所有人能访问
     return obj

复杂请求：  先处理遇见，在处理操作
 def new_users(request):
     if request.method = 'OPTIONS': # 先通过预检
         obj = HttpResponse()
         obj['Access-Control-Allow-Origin'] = "*"
         obj['Access-Control-Allow-Methods'] = "DELETE"
         return obj  

     obj = HttpResponse('aaaaa') # 再跨域
     obj['Access-Control-Allow-Origin'] = "*"
     return obj

 

posted @ 2018-05-23 10:28  G500  阅读(107)  评论(0)    收藏  举报