【Django restframework】django跨域问题,解决PUT/PATCH/DELETE用ajax请求无法提交数据的问题

【Django restframework】django跨域问题,解决PUT/PATCH/DELETE用ajax请求无法提交数据的问题


1 问题描述:

我用restframework(ModelSerializer+GenericApiView)开发了一组符合RestFul接口标准的接口,这意味着它将支持客户端发来的GET、POST、PATCH、PUT、DELETE请求,分别对某一资源进行获取、创建、部分修改、全部修改、删除操作。
在进行前后端联调的时候,我遇到了跨域问题:ccess to XMLHttpRequest at ‘http://127.0.0.1:8000/book/’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource
于是我使了用第三方库django-cors-headers,并在settings中做了一些配置。此时,GET、POST请求(简单请求)可以正常的提交与请求数据,但是PUT请求提示:net::ERR_CONNECTION_ABORTED,浏览器返回NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load
在这里插入图片描述
我很困惑,并不清楚为什么跨域请求资源只允许提交GET/POST请求,因为之前我已在后端做好了一系列配置。这个问题困扰了我两天,期间我尝试了各种方法,包括自定义CORS中间件、重写ajax提交PUT请求的方式等,都没有解决PUT无法提交的问题。终于,我找到了一个办法,并且成功了。

我的服务器是Windows Server2016


2 解决办法:

2.1 解决方法综述

① 前端用POST请求替代PUT/DELETE,并且在header中定义`X-HTTP-Method-Override:PUT`
② 后端引入python第三方库`django-method-override`,它用于识别前端http请求header中的X-HTTP-Method-Override参数值,并将它与相应的视图对应起来。

2.2 解决方法实行

2.2.1 前端

前端我用的是jQuery ajax来发起PUT请求,我做了以下配置:

$.ajax({
    url: 'yourUrl',
    type: 'POST',   // 此处必须是POST
    headers: {
        'X-HTTP-Method-Override': 'PUT',  // 此处是实际的请求方式 对应后端视图可接受的请求方式
        'accept': 'application/json',  // 这也是必须的
    },
    data: JSON.stringify({
        'name': name,
        'mobile': mobile,
        'province': province,
    }),
    dataType: 'json',
    contentType: 'application/json',
    async: false,
    crossDomain: true,
    success: function (res) {
        // 成功的操作
    },
    error: function (res) {
        // 失败的操作
    }
})
2.2 后端的配置

第一步:安装django-method-override

pip install django-method-override

第二步:重写项目配置文件settings.py

INSTALLED_APPS = [
    'corsheaders',
    'method_override',  # 新增的
    # ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    # ...
    'django.middleware.csrf.CsrfViewMiddleware',
    'method_override.middleware.MethodOverrideMiddleware',  # 新增method_override中间件,注意在CSRF之下
    # ...
]

第三步:重启项目
成功提交,并且成功的更新了数据库。
在这里插入图片描述


目前我只尝试了PUT请求,PATCH和DELETE还未用此法进行测试。如果有问题我将回来更新这篇文章,希望能对大家解决此问题提供一些思路。
PATCH也已经用这种方法试过了,没有问题,可以正常提交。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/104696.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【分布式技术专题】「分布式技术架构」MySQL数据同步到Elasticsearch之N种方案解析,实现高效数据同步

MySQL数据同步到Elasticsearch之N种方案解析,实现高效数据同步 前提介绍MySQL和ElasticSearch的同步双写优点缺点针对于缺点补充优化方案 MySQL和ElasticSearch的异步双写优点缺点 定时延时写入ElasticSearch数据库机制优点缺点 开源和成熟的数据迁移工具选型Logsta…

【SwiftUI模块】0060、SwiftUI基于Firebase搭建一个类似InstagramApp 2/7部分-搭建TabBar

SwiftUI模块系列 - 已更新60篇 SwiftUI项目 - 已更新5个项目 往期Demo源码下载 技术:SwiftUI、SwiftUI4.0、Instagram、Firebase 运行环境: SwiftUI4.0 Xcode14 MacOS12.6 iPhone Simulator iPhone 14 Pro Max SwiftUI基于Firebase搭建一个类似InstagramApp 2/7部分-搭建Tab…

企业财务数字化转型怎么才能落地?_光点科技

企业财务数字化转型一直是企业发展中的一个重要议题。在当今数字化的时代,将财务流程纳入数字化转型计划中,不仅能够提高工作效率,还能为企业带来更多的商业机会。那么,企业财务数字化转型如何才能真正落地呢? 企业需要…

Java设计模式大揭秘,细致剖析5种经典模式

public class SingletonClass {private static SingletonClass instance;private SingletonClass() {// 私有构造函数,防止外部实例化}public static SingletonClass getInstance() {if (instance null) {instance new SingletonClass();}return instance;} }如下…

【机器学习合集】深度学习模型优化方法最优化问题合集 ->(个人学习记录笔记)

文章目录 最优化1. 最优化目标1.1 凸函数&凹函数1.2 鞍点1.3 学习率 2. 常见的深度学习模型优化方法2.1 随机梯度下降法2.2 动量法(Momentum)2.3 Nesterov accelerated gradient法(NAG)2.4 Adagrad法2.5 Adadelta与Rmsprop法2.6 Adam法2.7 Adam算法的改进 3. SGD的改进算法…

共享购模式:重新定义电商购物体验

在当今的电商市场,消费者对购物体验的需求日益增长,他们不再满足于传统的电商模式。为此,共享购模式应运而生,这种创新模式将线下实体商业与线上虚拟商城相结合,为用户带来全新的购物体验。本文将详细讲解共享购模式的…

云游数智农业世界,体验北斗时空智能

今日,2023年中国国际农业机械展览会在武汉正式拉开帷幕,众多与会者云集,各类农机产品纷呈,盛况空前。 千寻位置作为国家北斗地基增强系统的建设与运营方,在中国国际农业机械展览会上亮相,以「北斗时空智能 …

二维码生成和解析工具包-zxing

目录 1、简介 2、做个例子 2.1 添加依赖 2.2 工具类 2.3 测试 3、总结 今天在看一个开源项目的时候发现一个工具类,一个简单的生成二维码的工具类,测试了下很是方便。 虽然在平常的开发中没有使用过,为了以后的场景做个备份 1、简介 …

性能测试工具:Jmeter介绍

JMeter是一个开源的Java应用程序,由Apache软件基金会开发和维护,可用于性能测试、压力测试、接口测试等。 1. 原理 JMeter的基本原理是模拟多用户并发访问应用程序,通过发送HTTP请求或其他协议请求,并测量响应时间、吞吐量、并发…

小程序如何设置自取规则

​在小程序中,自取规则是指当客户下单时选择无需配送的情况下,如何设置相关的计费方式、指定时段费用、免费金额、预定时间和起取金额。下面将详细介绍如何设置这些规则,以便更好地满足客户的需求。 在小程序管理员后台->配送设置->自…

python自动化测试(二):获取元素定位的基本方式

目录 一、前置代码 二、通过HTML元素ID的方式去进行元素定位 三、通过HTML元素的name属性进行元素定位 四、练习一:打开百度登录界面并输入数据后登录 五、通过HTML元素的类名来进行元素定位 六、通过链接的文本值方式进行元素定位 七、通过部分的链接文本值…

安卓端GB28181设备接入模块如何实现实时位置订阅(MobilePosition)

技术背景 实时位置(MobilePosition)订阅和上报,对GB28281设备接入终端尤其重要,如移动单兵设备、执法记录仪、智能安全帽、车载终端等,Android国标接入设备通过获取到实时经纬度信息,按照一定的间隔上报到…

Hadoop3教程(三十五):(生产调优篇)HDFS小文件优化与MR集群简单压测

文章目录 (168)HDFS小文件优化方法(169)MapReduce集群压测参考文献 (168)HDFS小文件优化方法 小文件的弊端,之前也讲过,一是大量占用NameNode的空间,二是会使得寻址速度…

【目标跟踪】多目标跟踪测距

文章目录 前言python代码(带注释)main.pysort.pykalman.pydistance.py 结语 前言 先放效果图。目标框内左上角,显示的是目标距离相机的纵向距离。目标横向距离、速度已求出,没在图片展示。这里不仅仅实现对目标检测框的跟踪&#…

ios上架上传构建版本的windows工具

ios上架的必要步骤,是将打包好的二进制ipa文件,上传到app store的构建版本里,苹果并没有提供上传构建版本的工具,这里我介绍下windows下上传构建版本的方案。 下面说下上传的基本步骤: 第一步,上传前要先…

2023年中国医疗器械供应链服务平台发展趋势分析:向国家高端化市场发力[图]

医疗器械供应链服务主要分为全流程供应链服务与院内SPD服务,同时全流程供应链服务主要分为市场、仓储物流与金融三大服务。在SPD数字化赋能下,大数据、云计算等技术支撑促进一站式数字化供应链业务协同平台,带动了整体医疗器械供应链服务的发…

Homeassistant docker配置

Homeassistant docker配置 【说明】本系列为自用教程,记录以便下次使用 【背景】一台J1900 4G64G的小主机,安装了OP系统,里面自带了Docker。为实现Homeassistant(简称HA)控制智能家居设备,进行如下配置。 【…

uni-app配置微信开发者工具

一、配置微信开发者工具路径 工具->设置->运行配置->小程序运行配置->微信开发者工具路径 二、微信开发者工具开启服务端口

SpringBoot依赖和代码分开打包

前言 在公司的项目中,一个SpringBoot工程可能就上百MB,这时候当线上网速不佳的时候,部署起来就十分的痛苦了。。经常等好久才能上传完毕,接下来我来教大家一个SpringBoot工程代码和依赖分开打包的方法。这种方法将依赖和代码分开…

AWS SAA-C03考试知识点整理

S3: 不用于数据库功能 分类: S3 Standard :以便频繁访问 S3 Standard-IA 或 S3 One Zone-IA : 不经常访问的数据 Glacier: 最低的成本归档数据 S3 Intelligent-Tiering智能分层 :存储具有不断变化或未知访问…