当前位置: 移动技术网 > IT编程>脚本编程>Python > 详解Django解决ajax跨域访问问题

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

2018年09月23日  | 移动技术网IT编程  | 我要评论

bt5156无忧无虑,黄宏小品全集mp3,终极一班2丁小雨

这篇文章主要给大家介绍了关于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', 
) 

大功告成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网