处理跨域请求

<div class="iteye-blog-content-contain" style="font-size: 14px"><div id="cnblogs_post_body">
 浏览器具有同源策略，会禁止向与当前页面不同的域发送请求，只要是协议，域名，端口中有任何一个不同，都被当作是不同的域，这虽然是一种保护数据的机制，但是对我们开发来说确是个麻烦，解决办法有很多，这里介绍一下JSONP和CORS 
 先来理解一下浏览器这个同源策略是什么，就是浏览器禁止掉向其他域名发送的请求，其实是在请求回来的时候被禁掉的 
 <img src="http://images2017.cnblogs.com/blog/1164899/201711/1164899-20171120163200633-931000397.png" alt="" /> 
 哪些操作会受同源策略，哪些不会呢？ 
 　　requests模块不受影响，因为没有经过浏览器 
 　　ajax发请求时，浏览器会限制(我们就是要解决这个问题） 
 　　有src属性的都不受同源策略限制　　&nbsp;-img,script,iframe 
 　　　　但是注意，script中的src，拿到的数据会当作js代码执行，所以不能直接把数据放到src中 
 &nbsp; 
 JSONP 
 　　jsonp是一种机智的方式，本质就是在远程发送数据的时候，在数据外层套一个函数名，把数据以函数的形式返回（这样才能被script识别） 
 　　在本地先定义一个函数，当远程发送过来数据，本地就当成一个函数执行，真实数据就相当于参数 
 &nbsp; 
 　　jsonp本质就是创建一个script标签，把url放到src属性中，就是相当于发送了一个get请求，事实上jsonp只能发送get请求 
 &nbsp; 
 用一个简单的示例来理解一下jsonp的本质 
 客户端的地址是：localhost:8000，要向服务端&nbsp;localhost：8888&nbsp;发送请求，获取数据， 
 利用jsonp来避开同源策略： 
 客户端： 
 <div class="cnblogs_code"> 
  <pre>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button onclick=&quot;jsonp('http://127.0.0.1:8888/get_data?callback=func')&quot;&gt;获取数据&lt;/button&gt;{#通过参数向服务端发送函数名，这样就能实现动态生成函数名#}</pre> 
  <pre>&lt;script&gt;
    function func(arg) {
        console.log(arg);
        document.head.removeChild(tag);
    }
 
    function jsonp(url) {
        tag = document.createElement('script');//创建一个script标签，用来发送请求，注意是一个全局的变量，以便在func函数中删除
        tag.src = url;
        document.head.appendChild(tag); //在html的头文件中添加这个script标签
    }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre> 
 </div> 
 &nbsp; 
 服务端： 
 <div class="cnblogs_code"> 
  <pre>from djan<a href="http://www.cppentry.com/list.php?fid=78">GO</a>.shortcuts import HttpResponse def get_data(request):     func_name = request.GET.get('callback')#从请求头中获取函数名     return HttpResponse('%s(数据)'%func_name)#返回一个函数，把数据当作参数</pre> 
 </div> 
 1.jsonp就是利用script的src发送请求不会被受同源策略限制，然后通过src属性向服务端发送请求 
 2.script会把请求来的数据当成是js代码，所以服务端返回的数据不能直接是数据，会报错 
 3.把返回值封装成一个函数的形式，真实数据放在函数的参数中，客户端等收到后，从函数中拿到数据就行了 
 4.这个函数名最好是动态生成的，不然每次发送一个请求就要前后端商量好函数名，太麻烦 
 &nbsp; 
 以上就是jsonp的原理 
 所以使用jsonp,本地需要定义一个函数，而远程需要把数据封装成一个函数 
 再来看看ajax如何实现跨域请求 
 <div class="cnblogs_code"> 
  <pre>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button onclick=&quot;jsonp()&quot;&gt;获取数据&lt;/button&gt;
&lt;script&gt;
    function func(arg) {
        console.log(arg);
        document.head.removeChild(tag);
    }
 
    {# 这种实际上就是内部帮我们实现创建一个script标签#}
    function jsonp() {
        $.ajax({
            url:'http://127.0.0.1/get_data',
            type:'GET',
            dataType:'JSONP',
            jsonp:'callback',
            jsonCallback:'func'{# 这两行就是自动在url后面添加?callback=func #}
 
 
        })
    }
&lt;/script&gt;</pre> 
 </div> 
 &nbsp; 
 jsonp只能发送get请求，但是可不是所有的数据都能封装在参数中，想要发送post请求，还得用CORS 
 <hr /> 
 &nbsp; 
 CORS跨站资源共享（Cross-Origin Resource Sharing） 
 再来看一下跨域请求时，浏览器的提示信息： 
 <img src="http://images2017.cnblogs.com/blog/1164899/201711/1164899-20171120163200633-931000397.png" alt="" /> 
 之所以ajax发送请求，返回的数据拿不到，是因为少了一点东西。提示缺少一个响应头，所以CORS的原理就是添加上这个响应头 
 只需要修改视图函数&nbsp; 
 <div class="cnblogs_code"> 
  <pre>from djan<a href="http://www.cppentry.com/list.php?fid=78">GO</a>.shortcuts import HttpResponse
 
def get_data(request):
    response = HttpResponse('数据')
    response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8888'#这样表示允许这个地址访问
    #response['Access-Control-Allow-Origin'] = '*'#这样表示允许所有地址访问
    return response</pre> 
 </div> 
 这样就可以了，这是最简单的情况，本地不用做任何事，远程设置一个响应头 
 &nbsp; 
 还有一种复杂点的情况：非简单请求 
 简单请求&amp;非简单请求： 
 　　简单请求的条件：　　 
 　　　　1.请求方式为&nbsp;HEAD，GET，POST 
 　　　　2.请求头中Content-Type的值是下面这三个中的一个 
 　　　　　　application/x-www-form-urlencoded 
 　　　　　　multipart/form-data 
 　　　　　　text/plain 
 &nbsp; 
 　　　　同时满足以上两个条件时，才是简单请求，有一个不满足就是复杂请求 
 &nbsp; 
  对于复杂请求，以PUT请求为例，会先发一个options请求，用来预检，对于预检请求，也要返回响应头 
 远程视图函数要这样处理： 
 <div class="cnblogs_code"> 
  <pre>def data(request):
    if request.method == 'OPTIONS':
        #预检
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Methods'] = 'PUT'#允许这个请求头　　
        return response
    elif request.method == 'PUT':
        #预检通过后真正的请求
        response = HttpResponse('数据')
        response['Access-Control-Allow-Origin'] = '*'
        
        return response</pre> 
 </div> 
 如果GET请求自定义请求头，也变成了复杂请求，也需要设置一下，允许这个请求头 
 比如自定义了一个请求头：xxx:yyyy 
 那远程代码中就要允许这个请求头 
 <div class="cnblogs_code"> 
  <pre>def data(request):
    if request.method == 'OPTIONS':
        #预检
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = '*'
        # response['Access-Control-Allow-Methods'] = 'PUT'
        response['Access-Control-Allow-Headers'] = 'xxx'#允许这个请求头
 
        return response
    elif request.method == 'PUT':
        #预检通过后真正的请求
        response = HttpResponse('数据')
        response['Access-Control-Allow-Origin'] = '*'
 
        return response</pre> 
 </div> 
 <div>
  虽然复杂请求可以解决
 </div> 
 <div>
  但是，要尽量避免复杂请求，会增加服务器压力
 </div> 
 <div>
  <hr />总结，解决跨域请求，常用的有三种方式：requests模块，cors，jsonp
 </div> 
 <div>
  后两种直接从前端拿数据，不需要经过服务器，requests模块是先把请求发送到服务器，服务器向目标发送请求，再返回数据到本地
 </div> 
 <div>
  &nbsp;
 </div> 
 <div>
  jsonp和cors相比，兼容性更好一点
 </div> 
 <div>
  &nbsp;
 </div> 
 <div>
  参考博客：http://www.cnblogs.com/wupeiqi/articles/5703697.html
 </div>
</div></div>

猜你喜欢