CORS跨域请求
CORS跨域请求
CORS即Cross Origin Resource Sharing 跨域资源共享,
那么跨域请求还分为两种,一种叫简单请求,一种是复杂请求~~
简单请求
HTTP方法是下列方法之一 HEAD, GET,POST HTTP头信息不超出以下几种字段 Accept, Accept-Language, Content-Language, Last-Event-ID Content-Type只能是下列类型中的一个 application/x-www-from-urlencoded multipart/form-data text/plain
任何一个不满足上述要求的请求,即会被认为是复杂请求~~
* 简单请求和非简单请求的区别? 简单请求:一次请求 非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。
* 关于“预检”
(复杂请求会先发出一个预请求,我们也叫预检,OPTIONS请求~~) - 请求方式:OPTIONS - “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息 - 如何“预检” => 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过 Access-Control-Request-Method => 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过 Access-Control-Request-Headers
浏览器的同源策略
跨域是因为浏览器的同源策略导致的,也就是说浏览器会阻止非同源的请求~
那什么是非同源呢~~即域名不同,端口不同都属于非同源的~~~
浏览器只阻止表单以及ajax请求,并不会阻止src请求,所以我们的cnd,图片等src请求都可以发~~
解决跨域
JSONP
jsonp的实现原理是根据浏览器不阻止src请求入手~来实现的~~
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
class Test(APIView): def get(self, request): callback = request.query_params.get("callback", "") ret = callback + "(" + "'success'" + ")" return HttpResponse(ret)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<button id="btn_one">点击我向JsonP1发送请求</button> <script> // 测试发送请求失败 跨域不能得到数据 $('#btn_one').click(function () { $.ajax({ url: "http://127.0.0.1:8000/jsonp1", type: "get", success: function (response) { console.log(response) } }) }); function handlerResponse(response) { alert(response) }; window.onload = function () { $("#btn_one").click(function () { let script_ele = document.createElement("script"); script_ele.src = "http://127.0.0.1:8000/jsonp1?callback=handlerResponse"; document.body.insertBefore(script_ele, document.body.firstChild); }) } </script>
JsonP解决跨域只能发送get请求,并且实现起来需要前后端交互比较多。
添加响应头
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
from django.utils.deprecation import MiddlewareMixin class MyCors(MiddlewareMixin): def process_response(self, request, response): response["Access-Control-Allow-Origin"] = "*" if request.method == "OPTIONS": response["Access-Control-Allow-Headers"] = "Content-Type" response["Access-Control-Allow-Methods"] = "DELETE, PUT, POST" return response
即将秃头的程序员