跨域

什么是跨域？

跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！

同源策略

同源策略：域名、协议、端口均相同。

浏览器执行JavaScript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。

JSONP跨域

只支持GET请求，不支持POST等其它请求，也不支持复杂请求，只支持简单请求。

JSONP（json with padding 填充式json）：利用了使用src引用静态资源时不受跨域限制的机制。主要在客户端搞一个回调做一些参数接收与操作的处理，并把这个回调函数告知服务器，而服务器端需要做的是按照JavaScript的语法把数据放到约定好的回调函数之中即可，jQuery很早之前就已经把JSONP语法糖化了，使用起来会更加方便。

• 请求端

  // 基于jsonp  
  // 原理： ajax 不能直接跨域 。  
  //向html中加入script标签 含有访问路径，script标签直接访问路径达到效果  
  $('.get_service2').click(function () {  
    
  // 伪造ajax提交请求  
  $.ajax({  
  url:'http://127.0.0.1:8001/service/',  
  type: 'get',  
  dataType: 'jsonp', // 伪造ajax 基于script  
  jsonp: 'callbacks',  
  // 随机取一个函数名发给请求方，对方解析好后返回过来  
  success: function (data) {  
  console.log(data)  
  }  
  })  
  });  
  

• 服务端

  import json  
    
  def service(request):  
  # 等待请求返回json数据  
  func = request.GET.get('callbacks') # 固定方法名jsonp  
  info = {'name': 'zok', 'age': 18}  
    
  return HttpResponse("%s('%s')" % (func, json.dumps(info)))  
  

CORS跨域

支持所有的请求，包含GET、POST、OPTOIN、PUT、DELETE等。既支持复杂请求，也支持简单请求。CORS（Cross-origin resource sharing 跨域资源共享）：依附于AJAX，通过添加HTTP Header部分字段请求与获取有权限访问的资源。CORS对开发者是透明的，因为浏览器会自动根据请求的情况（简单和复杂）做出不同的处理。CORS的关键是服务器端的配置支持

• 请求端

  $('.get_service1').click(function () {  
      $.ajax({  
          url:'http://127.0.0.1:8001/serviceCors/',  
          type:'get',  
          success:function (data) {  
              console.log(data)  
          }  
      })  
  });  
  

• 服务端

  def serviceCors(request):  
      """ 
      基于cors跨域 
      白名单域名 
      """  
      info = {'name': 'zok', 'age': 18}  
      response = HttpResponse(json.dumps(info))  
      # 设置指定ip 或 * 全部通过  
      response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000'  
      response['Access-Control-Allow-Origin'] = '*'  
      return response