Yunya-Cnblogs

前言

   在前后端分离项目中,如何解决跨域请求是一个必须要面对的问题。因为前端和后端的数据交互会被浏览器的同源策略所挟持,在很早之前我在博客园发了一篇文章,大概就说了一下如何简单粗暴的解决跨域。

   其实那种解决办法是不适用于内部项目的,而是对一些公共的开发接口做访问进行数据获取,下面是文章链接:

   jQuery JSONP解决跨域请求

CORS

   CORS就是跨域资源共享的意思,它需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

   整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

   因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

基本流程

   浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。 浏览器发出CORS简单请求,只需要在头信息之中增加一个Origin字段。 浏览器发出CORS非简单请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

请求区别

   只要同时满足以下两大条件,就属于简单请求,否则就是非简单请求。

  1. 请求方法是以下三种方法之一:

       HEAD GET POST

  1. HTTP的头信息不超出以下几种字段: Accept Accept-Language Content-Language Last-Event-ID Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

处理情况

   浏览器对于上面两种请求处理,会有不一样的方式:

   简单请求

   浏览器只会发送一次请求,然后后端将会返回数据,此时后端如果没有做跨域资源请求的允许,数据将会被浏览器同源策略所拦截。

   非简单请求

   浏览器会发送两次请求,第一次请求方式为OPTIONS,大概就是做一个预检查,检查后端是否允许第二次请求的发送。

   如果允许,才会发送第二次请求,后端会将第二次请求的数据返回,如果后端没有做跨域资源请求的允许,数据将会被浏览器同源策略所拦截。

   如果不允许,浏览器就不会发送第二次请求。

后端解决

   对于简单请求来说,我们只需要允许跨域资源共享即可。

   所以只需要在后端设置一个请求头:

Access-Control-Allow-Origin = "域名或者*"

   对于非简单请求来说,我们需要让预检进行通过,此外还需要允许跨域资源共享,所以需要设置最少设置两个或多个请求头:

  • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
  • “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
# 这两个是让预检通过
Access-Control-Allow-Headers = "Content-Type"
Access-Control-Allow-Headers = "authorization"  #JWT认证

# 下面这个是允许资源共享
Access-Control-Allow-Origin = "域名或者*"

基本总结

   一言以蔽之,当前端跨域向后端发送、请求数据时,有可能发简单请求,也有可能发非简单请求。

   简单请求只会发一次,而非简单请求会发两次请求。

   如果是简单请求,数据就会直接返回,如果是非简单请求,则需要后端做出一些相应的设置才会允许第二次真正请求的发送。

   对于非简单请求的预检来说,它其实是规定了前端能够去使用哪些请求方式,如GET/POST,同时还允许请求头中有什么,如Content-Type以及JWT随机字符串。

   我举个例子,如果前端要跨域通过POST请求发送一个JSON数据那么它的流程如下:

    1. 发送OPTIONS请求进行预检,检测是否允许带有Content-Type请求头(因为JSON格式必须由该请求头声明)
    2. 预检通过后,发送POST请求,Content-TypeJSON,带上数据发送过去。

Django解决

中间件

   对于Django来说,我们可以将处理设置在中间件中。不管你是使用drf还是原生Django,都可以这样设置,因为此时的request对象并未被包装。

   下面是同时支持简单请求和非简单请求的示例:

from django.utils.deprecation import MiddlewareMixin

class CorsMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        response['Access-Control-Allow-Origin'] = '*'  # 允许跨域,解决同源策略。简单和非简单请求都需要设置这个
        if request.method == "OPTIONS":
            # 可以加*,代表允许所有。 这里是预检的OPTIONS请求,它允许Content-Type请求头和authorization请求头。
            response["Access-Control-Allow-Headers"] = "Content-Type"  # 
            response["Access-Control-Allow-Headers"] = "authorization"

        return response
        
# 记得在setting的中间件中配置

django-cors-headers

   这是一个模块,可以很好的解决同源策略问题,以及非简单请求的预检问题。

   下载安装即可:

pip install django-cors-headers

   然后需要进行注册:

INSTALLED_APPS = (
	'corsheaders',
)

   添加中间件(其实它的解决方案和上面写的思路完全一模一样):

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
	...
	'corsheaders.middleware.CorsMiddleware',  # 写上面,因为Django中间件的返回顺序是自下而上。
	...
]

   在settings.py中进行配置:

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True  # 允许异端请求,解决同源策略

CORS_ORIGIN_WHITELIST = (
	'*'
)
CORS_ALLOW_METHODS = (  # 允许的请求方式
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (  # 允许的请求头
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
)

分类:

Django

技术点:

相关文章: