CORS 跨域资源共享

CORS 定义

CORS Cross-Origin Resource Sharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。CORS是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。W3C CORS 工作草案
同源策略:是浏览器最核心也最基本的安全功能;同源指的是:同协议,同域名和同端口。精髓:认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源;参考:JavaScript 的同源策略
JSON & JSONP:JSON 是一种基于文本的数据交换方式,或者叫做数据描述格式。JSONP是资料格式JSON的一种“使用模式”,可以让网页从别的网域要资料,由于同源策略,一般来说位于server1.example.com的网页无法与不是 server1.example.com的服务器沟通,而HTML的script元素是一个例外。利用script元素的这个开放策略,网页可以得到从其他来源动态产生的JSON资料,而这种使用模式就是所谓的JSONP

 

解决方法原理

     1、原理1:前端发送数据虽然ajax受同源策略限制。但是前端<script>、<img>、<iframe>等节点元素发送数据不受同源策略限制(凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)。ajax可以仿照前端script节点元素发送数据从而绕过浏览器同源策略限制,即jsonp方法(绕过策略,后们进入)。

     2、原理2:前端向异域名发送ajax数据之所以不能接受到数据是由于收浏览器的同源策略影响,所以我们可以通过代理的方式来让代理帮我们发送数据到服务端,并且让代理帮我们接收服务端数据,因为代理上接受和发送数据不是通过浏览器进行发送接受的,所以不会受同源策略的影响。比如说python中的requests模块是专门仿造浏览器发送和接受请求的。

     3、原理3:前端发送ajax数据之所以受同源策略限制是因为服务端返回数据没有设置响应头,浏览器通过判断响应头来是否接受数据,所以我们就可以在服务端发送数据之前设置好响应头信息,即CORS方法

CORS 对比 JSONP

都能解决 Ajax直接请求普通文件存在跨域无权限访问的问题

  1. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求
  2. 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理
  3. JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS

解决方法:

一:jsonp 

1.script方法(客户端根据script元素标签属性自动生成jsonp方法),须知<script>、<img>、<iframe>中的src属性都是通过get方式将请求的数据下载下来(下载的数据是字符串形式的变量),然后通过本地的js渲染下载的数据,就和服务端中数据一摸一样。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun(arg) {
            alert(arg)
        }
    </script>
    <script src="http://127.0.0.1:8000/get_data.html"></script>

</head>
客户端 html
def get_data(request):

    return HttpResponse('fun("机密数据")')
Django 视图函数

2、input方法(客户端根据input元素标签属性手动生成jsonp方法)

<body>
    <input type="text" />
    <div id="i1"></div>
    <input type="button" onclick="jsonp('http://127.0.0.1:8000/get_data.html')"  value="发送JSONP请求"/>
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
            function fun(arg) {
            alert(arg);
 
            document.head.removeChild(tag);
        }
 
        function jsonp(url){
            tag = document.createElement('script');
            tag.src = url;
            document.head.appendChild(tag);
        }
    </script>
客户端 html
def get_data(request):
 
    return HttpResponse('fun("机密数据")')
Django 视图函数

3、input方法+url方法(客户端根据url传递的相应参数使服务端返回相对应的字符串)

<body>
    <h1>皇家赌场</h1>
    <input type="text" />
    <div id="i1"></div>
 
    <input type="button" onclick="jsonp('http://127.0.0.1:8000/get_data.html?callback=funcvvvvvv')"  value="发送JSONP请求"/>
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
            function funcvvvvvv(arg) {
            alert(arg);
 
            document.head.removeChild(tag);
        }
 
        function jsonp(url){
            tag = document.createElement('script');
            tag.src = url;
            document.head.appendChild(tag);
        }
    </script>
</body>
客户端 html
def get_data(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("机密数据")' %func_name)
服务端

4、jsonp方法(客户端通过jsonp方式发送ajax实际上不是发送ajax请求,而是把ajax内的数据转换成script标签和相应的函数,根据script标签属性来发送数据)

<body>
<h1>皇家赌场</h1>
<input type="text"/>
<div id="i1"></div>
 
<input type="button" onclick="Jsonp2()" value="发送JSONP2请求"/>
 
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function Jsonp2() {
        $.ajax({
            url: "http://127.0.0.1:8000/get_data.html",
            type: 'GET',
            dataType: 'JSONP',
            success: function (data) {
                alert(data);
            }
        })
    }
</script>
</body>
客户端,html
def get_data(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("机密数据")' %func_name)
服务端

 5、jsonp完整版

(dataType告诉ajax我其实是通过生成script标签发送数据,jsonp实际上是向url上添加一个键值对来告诉客户端返回的字符串的格式,jsonpCallback实际上是客户端接受到数据后执行对应的函数)

<body>
<h1>皇家赌场</h1>
<input type="button" onclick="Jsonp3()" value="发送JSONP3请求"/>
 
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function Jsonp3() {
        $.ajax({
            url: "http://127.0.0.1:8000/get_data.html",
            type: 'GET',
            dataType: 'JSONP',
            jsonp: 'callback',
            jsonpCallback: 'list'
        })
    }
    function list(arg) {
        console.log(arg)
        alert(arg)
    }
 
</script>
</body>
客户端,html
def get_data(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("机密数据")' %func_name)
服务端

 二:代理:

  在python中可以通过requests模块来实现代理

三:CORS方法

  在客户端设置代码(直接通过ajax发送数据)

<body>
    <h1>皇家赌场</h1>
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        $.ajax({
            url: "http://127.0.0.1:8000/get_data.html?xxx=666",
            type: 'GET',
            success: function(data){
                console.log(data);
            }
        })
    </script>
</body>
客户端,html

   在服务端局部设置响应头(*代表匹配所有,也可以跟正则表达式匹配)

def get_data(request):
    response = HttpResponse("机密数据")
    response['Access-Control-Allow-Origin'] = "*"
    # response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"
    return response
服务端

注:

1、如果想在全局设置响应头信息就可以直接在django中间件中设置

2、简单请求 和 非简单请求(同时满足以下两个条件时,则是简单请求,否则为复杂请求

      条件:1、请求方式:HEAD、GET、POST

           2、请求头信息:
                Accept
                Accept-Language
                Content-Language
                Last-Event-ID
                Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
3、简单请求和非简单请求的区别?
   简单请求:一次请求
   非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”(options),只有“预检”通过后才再发送一次请求用于数据传输,"
4、关于“预检”
     1、请求方式:OPTIONS
     2、什么是预检
        预检其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息
     3、如何预检?
         1、如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过
            Access-Control-Request-Method
         2、 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过
            Access-Control-Request-Headers
复杂请求的配置:
def get_data(request):
    if request.method == "OPTIONS":
        # 预检也要有返回值,可以为空,并且允许所以用户预检,允许预检方式为PUT,运行预检头的值为xxx
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = "*"
        # response['Access-Control-Allow-Methods'] = "PUT"
        response['Access-Control-Allow-Headers'] = "xxx"

       response['Access-Control-Allow-Headers']="true"
       return response   
  elif request.method == "GET":      
    response = HttpResponse("机密数据")       
    response['Access-Control-Allow-Origin'] = "*"      
    return response
服务端
function JqSendRequest(){
          $.ajax({
              url: "http://c2.com:8000/test/",
              type: 'PUT',
              dataType: 'text',
              headers: {'k1': 'v1'},
              xhrFields:{withCredentials: true},#如果设置想要头必须加上这句话
              success: function(data, statusText, xmlHttpRequest){
                  console.log(data);
              }
          })
客户端

 

posted @ 2017-10-22 18:54  皖心  阅读(199)  评论(0编辑  收藏  举报