CORS和jsonp实现跨域请求

同源策略：所谓同源是指，域名，协议，端口相同，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。当浏览器同时打开两个tab页面（两个不同服务器提供），tab1页面发送请求时，浏览器会检测是否是向tab1的服务器发出请求，若是向tab2的服务器发出的请求会报错。如下面的示例代码，index.html 运行在 http://127.0.0.1:8001服务器上，向另一个服务器http://127.0.0.1:8002/cos_service 发送ajax请求，浏览器控制台出现错误提示：同源策略禁止读取位于 http://127.0.0.1:8002/cos_service/ 的远程资源。（原因：CORS 请求未能成功）, 为了实现这种跨域请求，可以利用CORS和jsonp.

index.html ( http://127.0.0.1:8001/index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
<p>跨域请求jsonpdemo2项目中的视图</p>
<button onclick="send();">请求</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
function send() {
        $.ajax({
            url:'http://127.0.0.1:8002/cos_service/',     
type: 'get',
success:function(data) {
            console.log(data);
}}
        );
}
</script>
</body>
</html>

1. CORS ( Cross-origin resource sharing ) 跨域资源共享

　　对于上面的请求，只需在http://127.0.0.1:8002/cos_service/的视图函数的返回请求头中设置Access-Control-Allow-Origin=访问的域名，此处为http://127.0.0.1:8001，代码如下：

views.py （ http://127.0.0.1:8002/）

def cos_service(request):
　　info={"name":"小明","age":24}
   response = HttpResponse(json.dumps(info))
   response['access-control-allow-origin']='http://127.0.0.1:8001'
　　# response['access-control-allow-origin'] = '*'     #对所有客服端请求
　　return response

相关知识：

　　浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

　　只要同时满足以下两大条件，就属于简单请求

　　（1) 请求方法是以下三种方法之一：
  　　　　  HEAD
    　　　　GET
   　　　　 POST
　　（2）HTTP的头信息不超出以下几种字段：
　　　　   Accept
　　　　   Accept-Language
    　　　　Content-Language
   　　　　 Last-Event-ID
   　　　　 Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

　　*简单请求和非简单请求的区别？

　　　　简单请求：一次请求
　　　　非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
　　* 关于“预检”

　　　　- 请求方式：OPTIONS
　　　　- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
　　- 如何“预检”
     　　　　=> 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        　　Access-Control-Request-Method
    　　　　 => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
       　　 Access-Control-Request-Headers

　　支持跨域，简单请求

　　　　服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

　　支持跨域，复杂请求

　　由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

2. jsonp实现 (json + padding)

　　jsonp主要利用script标签中src的跨域请求，需要前后端的配合实现，设置相同函数名称。对于上面 http://127.0.0.1:8001/ 上的前端页面index.html，ajax请求中设置参数jsonp：callback，并定义相应的function callback（）函数，在 http://127.0.0.1:8002/的视图函数views.py的返回内容中内嵌相同的函数名称，即字符窜“callback（）”。具体代码如下：

　　(注意：ajax请求跨域url为：http://127.0.0.1:8002/service，设置成https://127.0.0.1:8002/service会出错，服务器不会响应)

index.html (http://127.0.0.1:8001/)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
<p>跨域请求jsonpdemo2项目中的视图</p>
<button onclick="send();">请求</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
     function callable(arg){
         console.log(arg);
    }
</script>
<script>
    function send() {
        $.ajax({
            url:'http://127.0.0.1:8002/service/',
            type: 'get',
            dataType:'jsonp',     //未加jsonp时控制台显示：同源策略禁止读取位于 http://127.0.0.1:8002/service/ 的远程资源。（原因：CORS 请求未能成功）
            jsonp:'callable',
            success:function(data) {
        }}
        );

views.py ( http://127.0.0.1:8002/)

def service(request):
    print 'service'
    data ='参数'
    info={"name":"小明","age":24}
    # return HttpResponse("callable('%s')"%data)
    return HttpResponse("callable('%s')" %json.dumps(info))

　　上面的ajax请求中dataType:'jsonp', 伪造script的src请求，类似于下面的代码，将上面的index.html 换为下面代码时能达到相同的功能。

<script>
     function callable(arg){
        console.log(arg);
    }
</script>
<script src="http://127.0.0.1:8002/service/"></script> <!--https://时不会返回结果,另外script标签必须放在传回函数的下方，否则找不到-->
<script>

相关参考博客：http://www.cnblogs.com/yuanchenqi/articles/7638956.html#_label6

https://www.cnblogs.com/keyi/p/6726089.html

posted @ 2018-12-31 18:14 silence_cho 阅读(229) 评论(0) 编辑收藏举报

刷新页面返回顶部

silence_cho

CORS和jsonp实现跨域请求

公告