同源策略：所谓同源是指，域名，协议，端口相同，它是由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