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

这篇文章主要给大家介绍了关于django跨域请求问题解决的相关资料，文中介绍的实现方法包括：使用django-cors-headers全局控制、使用jsonp，只能用于get方法以及在views.py里设置响应头，只能控制单个接口，需要的朋友可以参考下。
使用django在服务器端写了一个api，返回一个json数据。使用ajax调用该api：

但是，chrome浏览器提示错误：

no 'access-control-allow-origin' header is present on the requested resource.

这是由于cors导致的。

什么是cors？

cors（跨域资源共享，cross-origin resource sharing）是一种跨域访问的机制，可以让ajax实现跨域访问。
其实，在服务器的response header中，加入“access-control-allow-origin: *”即可支持cors，非常的简单，apache/nginx等怎么配置，见参考文档。
举个例子：

1. api部署在domaina上；
2. ajax文件部署在domainb上，ajax文件会向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的middleware，只在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', 
) 

大功告成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。