CORS 跨域资源共享
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直接请求普通文件存在跨域无权限访问的问题
- JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求
- 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理
- JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS
解决方法：
一：jsonp
1.script方法(客户端根据script元素标签属性自动生成jsonp方法)，须知<script>、<img>、<iframe>中的src属性都是通过get方式将请求的数据下载下来（下载的数据是字符串形式的变量），然后通过本地的js渲染下载的数据，就和服务端中数据一摸一样。
<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>
def get_data(request):
return HttpResponse('fun("机密数据")')
2、input方法(客户端根据input元素标签属性手动生成jsonp方法)
<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>
def get_data(request):
return HttpResponse('fun("机密数据")')
3、input方法+url方法(客户端根据url传递的相应参数使服务端返回相对应的字符串)
<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>
def get_data(request):
func_name = request.GET.get('callback')
return HttpResponse('%s("机密数据")' %func_name)
4、jsonp方法（客户端通过jsonp方式发送ajax实际上不是发送ajax请求，而是把ajax内的数据转换成script标签和相应的函数，根据script标签属性来发送数据）
<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>
def get_data(request):
func_name = request.GET.get('callback')
return HttpResponse('%s("机密数据")' %func_name)
5、jsonp完整版
（dataType告诉ajax我其实是通过生成script标签发送数据，jsonp实际上是向url上添加一个键值对来告诉客户端返回的字符串的格式，jsonpCallback实际上是客户端接受到数据后执行对应的函数）
<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>
def get_data(request):
func_name = request.GET.get('callback')
return HttpResponse('%s("机密数据")' %func_name)
二：代理：
在python中可以通过requests模块来实现代理
三：CORS方法
在客户端设置代码（直接通过ajax发送数据）
<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>
在服务端局部设置响应头（*代表匹配所有，也可以跟正则表达式匹配）
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简单请求：一次请求
非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”（options），只有“预检”通过后才再发送一次请求用于数据传输，"请求方式：OPTIONS
2、什么是预检？ 预检其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息 3、如何预检？ 1、如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过 Access-Control-Request-Method 2、 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过 Access-Control-Request-Headers
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
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);
}
})
