python前后端分离跨域请求_Django前后端分离跨域请求问题

一、问题背景

之前使用django+vue进行前后端分离碰到跨域请求问题，跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的，当请求的响应不是处于同一个域名和端口下，浏览器不会接受响应，同源策略也是浏览器针对请求的安全问题所作出的一种保护行为。针对跨域问题，可以有下面的解决方式：

JSONP方式

自定义中间件，设置响应头

使用django-cors-headers包

二、解决方式

(一)自定义中间件

JSONP本质上是利用html的一些不受同源策略影响的标签属性src，例如：、、

1、自定义中间件

classMiddlewareMixin(object):def __init__(self, get_response=None):

self.get_response=get_response

super(MiddlewareMixin, self).__init__()def __call__(self, request):

response=Noneif hasattr(self, 'process_request'):

response=self.process_request(request)if notresponse:

response=self.get_response(request)if hasattr(self, 'process_response'):

response=self.process_response(request, response)returnresponseclassCORSMiddleware(MiddlewareMixin):defprocess_response(self,request,response):#添加响应头

#允许相应的域名来访问，多个域名中间以逗号隔开，如果全部可使用'*'

response['Access-Control-Allow-Origin'] = "*"

#允许携带的请求头，多个中间以逗号隔开

response['Access-Control-Allow-Headers'] = "Content-Type"

#允许发送的请求方式

response['Access-Control-Allow-Methods'] = "DELETE,PUT"

return response

2、注册中间件(在settings文件中注册)

MIDDLEWARE =['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware',

...

...'crm.utils.cors.CORSMiddleware' #跨域中间件

]

(二)CORS(Cross-Origin Resource Sharing)

1、安装django-cors-headers包

pip install django-cors-headers #在对应的开发环境中安装

2、修改settings文件

注册应用

#Application definition

INSTALLED_APPS=['django.contrib.admin',

...'django.contrib.staticfiles','corsheaders',#放在新建应用之前

'rest_framework',

...'crm']

中间件注册

MIDDLEWARE =['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','corsheaders.middleware.CorsMiddleware', #注意顺序，放在此处

'django.middleware.common.CommonMiddleware'，

...

]

其它设置

CORS_ORIGIN_ALLOW_ALL = True #允许所有的请求，或者设置CORS_ORIGIN_WHITELIST，二选一

CORS_ALLOW_HEADERS = ('*') #允许所有的请求头

CORS_ALLOW_CREDENTIALS = True #允许携带cookie，前端需要携带cookies访问后端时,需要设置withCredentials: true

这样就可以进行跨域使用了。

但是大多数站点将需要利用Django提供的跨站点请求伪造保护。CORS和CSRF是分开的，并且Django无法使用您的CORS配置免除网站Referer对安全请求所做的检查。做到这一点的方法是使用其CSRF_TRUSTED_ORIGINS设置。

3、CSRF整合

#1、CSRF_TRUSTED_ORIGINS 设置

CORS_ORIGIN_WHITELIST =['http://read.only.com'，'http://change.allowed.com'，

]#不需要CORS_ORIGIN_ALLOW_ALL=True的设置

CSRF_TRUSTED_ORIGINS=['change.allowed.com'，

]#2、中间件设置#启用此功能在django.middleware.csrf.CsrfViewMiddleware后，还应添加#corsheaders.middleware.CorsPostCsrfMiddleware

MIDDLEWARE_CLASSES =[

...'corsheaders.middleware.CorsMiddleware'，

...'django.middleware.csrf.CsrfViewMiddleware'，'corsheaders.middleware.CorsPostCsrfMiddleware'，

...

]