北京专业网站建设/sem是什么缩写

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请求~~

浏览器的同源策略

跨域是因为浏览器的同源策略导致的，也就是说浏览器会阻止非同源的请求~

那什么是非同源呢~~即域名不同，端口不同都属于非同源的~~~

浏览器只阻止表单以及ajax请求，并不会阻止src请求，所以我们的cnd，图片等src请求都可以发~~

解决跨域

JSONP

jsonp的实现原理是根据浏览器不阻止src请求入手~来实现的~~

classTest(APIView):defget(self, request):

callback= request.query_params.get("callback", "")

ret= callback + "(" + "'success'" + ")"

return HttpResponse(ret)

JsonP实现的后端代码

点击我向JsonP1发送请求

//测试发送请求失败 跨域不能得到数据

$('#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.οnlοad=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);

})

}JsonP测试前端代码

JsonP测试前端代码

JsonP解决跨域只能发送get请求，并且实现起来需要前后端交互比较多。

添加响应头

from django.utils.deprecation importMiddlewareMixinclassMyCore(MiddlewareMixin):defprocess_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"

returnresponse

中间件加响应头