jsonp原理,跨域请求头处理

一.jsonp(解决跨域)思路介绍:

因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内,

其在发送请求后会自动接收返回的东西,所以我们可以给要返回的内容进行特殊的处理;具体做法:

1. 使用个变量加括号的形式,把要返回的内容放入括号内

列如: return HttpResponse( "handlerResponse('返回内容')" )

2. 在html页面script标签对内放置个函数,让函数名等同于后端传来的变量名即可

function handlerResponse(data) { # data参数接收的就是后端真正想要返回的内容.

// do something....

alert(data)

}

3. 原理: 前端src出接收到的内容就是handlerResponse('返回内容')这种形式,而html页面内又定义了

handlerResponse为一个函数名,加括号就是调用的形式,正好会把其所要传送的东西以参数的形式被

data所接收,此时在函数内操作处理即可.

缺点: jsonp只能发送get请求,无法处理post请求,且get请求时无法指定contentytype等

二.加请求头方式:

我们先了解下跨域请求的分类(简单和复杂):

HTTP方法是下列方法之一

　　HEAD， GET，POST

HTTP头信息不超出以下几种字段

　　Accept， Accept-Language， Content-Language， Last-Event-ID

　　Content-Type只能是下列类型中的一个

　　　　application/x-www-from-urlencoded # form表单提交数据

　　　　multipart/form-data # 权限类型

　　　　text/plain # 文本类型

任何一个不满足上述要求的请求，即会被认为是复杂请求~~

复杂请求会先发出一个预请求，我们也叫预检，即OPTIONS请求~~

原理,在请求返回给浏览器前,给响应内容加上头部信息,让浏览器放行即可.

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"] = "PUT,PATCH,DELETE" # 复杂请求方式
        return response

jsonp原理,跨域请求头处理

猜你喜欢