详解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',
)

大功告成了。

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

赞 (0)

相关推荐

  • DRF跨域后端解决之django-cors-headers的使用

    在使用django-rest-framework开发项目的时候我们总是避免不了跨域的问题,因为现在大多数的项目都是前后端分离,前后端项目部署在不同的web服务器上,因为我们是后端程序员,因此我要通过后端的程序实现跨域.当然如果前端框架是Vue的话,则可以代理服务实现跨域,我也就知道一点点,如果有兴趣,大家可以自行搜索哦. DRF后端实现跨域我们使用一个第三方扩展--- djangocorsheaders 安装 pip install django-cors-headers 注册 INSTALLE

  • Django实现跨域的2种方法

    jsonp 方式一:指定返回方法 # 后端 def view(request): callback = request.GET.get('callback') return HttpResponse('%s("我要上鸭王")' %(callback,)); # javascript function submitJsonp4() { $.ajax({ url: 'http://127.0.0.1:9000/xiaokai.html', type: 'GET', //写post 没有用

  • django基于cors解决跨域请求问题详解

    一 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据 浏览器上就会报错,这个就是同源策略的保护,如果浏览器对javas

  • Python的Django应用程序解决AJAX跨域访问问题的方法

    引子 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width

  • Django中使用CORS实现跨域请求过程解析

    跨域请求: 请求url包含协议.网址.端口,任何一种不同都是跨域请求. 1.安装cors模块 pip install django-cors-headers 2.添加应用 INSTALLED_APPS = ( ... 'corsheaders', ... ) 3.设置中间件 MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] 4.添加允许访问的白名单,凡是出现在白名单的域名都可以访问后端接口 # CORS CORS_ORIG

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

    详解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

  • 浅析JSONP解决Ajax跨域访问问题的思路详解

    前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

  • 详解springboot解决CORS跨域的三种方式

    详解springboot解决CORS跨域的三种方式

    目录 一.实现WebMvcConfigurer接口 二.实现filter过滤器方式 三.注解@CrossOrigin 四.实战 五.cookie的跨域 一.实现WebMvcConfigurer接口 @Configuration public class WebConfig implements WebMvcConfigurer { /** * 添加跨域支持 */ @Override public void addCorsMappings(CorsRegistry registry) { // 允

  • JSONP跨域GET请求解决Ajax跨域访问问题

    前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

  • 详解Springboot+React项目跨域访问问题

    一.开发环境 框架:springboot 1.5.10.RELEASE 开发工具:IDEA JDK:1.8 前端框架:React 15.6.1 浏览器:Chrome浏览器 二.跨域问题 本地使用ajax访问localhost:8080端口时报错: Failed to load http://localhost:8080/test/test.do: No 'Access-Control-Allow-Origin' header is present on the requested resourc

  • express如何解决ajax跨域访问session失效问题详解

    前言 最近在学习express,就用以前做的项目来进行express前后端分离的练手了,在做登陆注册的时候发现跨域的时候,session的值是会失效的,导致session里面的数据获取为undefined,网上找资料加上自己的不断尝试,终于找到了解决方法,简单记录一下解决方法. 解决方法 1.客户端因为session原则上是需要cookie支持的,所以Ajax方法里面必须添加 xhrFields:{withCredentials:true},表示允许带Cookie的跨域Ajax请求( 特别说明,

  • ajax跨域访问报错501的解决方法

    问题:ajax跨域访问报错501 运行下面的代码会报错501 $.ajax({ type: "POST", url: "http://192.168.1.202/sensordata.php", contentType:'application/json; charset=utf-8', data: JSON.stringify(ajaxPostData), dataType:'json', success: function(data){ //On ajax su

  • Ajax跨域访问Cookie丢失问题的解决方法

    ajax跨域访问,可以使用jsonp方法或设置Access-Control-Allow-Origin实现,关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章<ajax 设置Access-Control-Allow-Origin实现跨域访问> 1.ajax跨域访问,cookie丢失 首先创建两个测试域名 a.fdipzone.com 作为客户端域名 b.fdipzone.com 作为服务端域名 测试代码 setcookie.PHP 用于设置服务端co

  • SpringBoot解决ajax跨域问题的方法

    SpringBoot解决ajax跨域,供大家参考,具体内容如下 一.第一种方式 1.编写一个支持跨域请求的 Configuration import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.anno

随机推荐