详解Django解决ajax跨域访问问题

本文主要介绍Django中解决跨域请求问题的几种实现方式。文中提到的方法包括：利用django-cors-headers进行全局控制、采用仅支持GET方法的JsonP技术，以及在views.py文件中手动设置响应头以控制单个接口。读者可根据实际需求参考以下方案。

当使用Django在服务器端编写API并返回JSON数据时，若通过Ajax调用该API，可能会遇到浏览器拦截。

Chrome浏览器会提示如下错误信息：

该错误是由CORS（跨域资源共享）机制导致的。

什么是CORS？

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种允许Ajax实现跨域访问的机制。实际上，只需在服务器的response header中加入“Access-Control-Allow-Origin: *”即可支持CORS，配置非常简便。关于apache或nginx等服务器的具体配置方法，可参考相关文档。

1. 假设API部署在DomainA上；
2. Ajax文件部署在DomainB上，该文件向API发送请求以获取并返回数据；
3. 用户通过DomainC访问DomainB上的Ajax文件，进而请求数据。

例如，前端页面打开的是'http://localhost:63343'地址，而Django服务器运行在'http://localhost:8000'地址。由于端口不同，从'http://localhost:63343'的JavaScript访问'http://localhost:8000'时，会被视为跨域访问。

若将前端页面直接放入Django项目中部署，则不会出现跨域访问被拒绝的情况。

以下是几种常见的解决方法：

1. 使用JSONP：在使用Ajax获取JSON数据时，存在跨域限制。然而，在Web页面中调用js的script脚本文件时不受跨域影响，JSONP正是利用这一特性来实现跨域传输。因此，需要将Ajax调用中的dataType从JSON改为JSONP（相应的API也需支持JSONP格式）。需要注意的是，JSONP仅适用于GET请求。

2. 直接修改Django中的views.py文件：在views.py中对应API的实现函数里，允许其他域通过Ajax请求数据。

 def myview(_request): 
 response = HttpResponse(json.dumps({"key": "value", "key2": "value"}))
 response["Access-Control-Allow-Origin"] = "*" 
 response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS" 
 response["Access-Control-Max-Age"] = "1000" 
 response["Access-Control-Allow-Headers"] = "*" 
 return response 

3. 安装django-cors-headers：此外，Django社区中有人开发了CORS-header中间件，只需在settings.py中进行简单配置即可开启CORS，从而避免跨域烦恼。

django-cors-headers

首先执行安装命令：

pip install django-cors-headers

然后在settings.py文件中进行相应配置即可生效。

 INSTALLED_APPS = [ 
  ... 
  'corsheaders', 
  ... ] 
 MIDDLEWARE_CLASSES = ( 
  ... 
  'corsheaders.middleware.CorsMiddleware', 
  'django.middleware.common.CommonMiddleware', # 注意顺序 
  ... 
 ) 
#跨域增加忽略 
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', 
) 

配置完成后，跨域问题即可解决。

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。