AjaxCORS 跨域资源共享

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渲染下载的多寡,就跟服务端着数量一摸一样。

Ajax 1Ajax 2

<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

Ajax 3Ajax 4

def get_data(request):

    return HttpResponse('fun("机密数据")')

Django 视图函数

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

Ajax 5Ajax 6

<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

Ajax 7Ajax 8

def get_data(request):

    return HttpResponse('fun("机密数据")')

Django 视图函数

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

Ajax 9Ajax 10

<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

Ajax 11Ajax 12

def get_data(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("机密数据")' %func_name)

服务端

4、jsonp方法(客户端通过jsonp方式发送ajax实际上不是殡葬ajax请求,而是将ajax内之数额易成script标签以及对应的函数,根据script标签属性来发送数据)

Ajax 13Ajax 14

<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

Ajax 15Ajax 16

def get_data(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("机密数据")' %func_name)

服务端

 5、jsonp完整版

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

Ajax 17Ajax 18

<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

Ajax 19Ajax 20

def get_data(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("机密数据")' %func_name)

服务端

 二:代理:

  在python中可由此requests模块来促成代理

三:CORS方法

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

Ajax 21Ajax 22

<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

   于服务端有设置响应头(*表示匹配有,也得以同正则表达式匹配)

Ajax 23Ajax 24

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

复杂请求的配备:

Ajax 25Ajax 26

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

服务端

Ajax 27Ajax 28

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);
              }
          })

客户端

 

相关文章