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) 请求方法是以下三种方法之一： *简单请求和非简单请求的区别？ ?? 简单请求：一次请求 - 请求方式：OPTIONS 支持跨域，简单请求 服务器设置响应头：Access-Control-Allow-Origin = ‘域名‘ 或 ‘*‘ 支持跨域，复杂请求 由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
? 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/‘,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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |