【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 解决方法综述

text 复制代码
① 前端用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请求,我做了以下配置:

javascript 复制代码
$.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

python 复制代码
pip install django-method-override

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

python 复制代码
INSTALLED_APPS = [
    'corsheaders',
    'method_override',  # 新增的
    # ...
]

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

第三步 :重启项目

成功提交,并且成功的更新了数据库。


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

PATCH也已经用这种方法试过了,没有问题,可以正常提交。

相关推荐
武子康35 分钟前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
舒一笑1 小时前
我的开源项目-PandaCoder迎来史诗级大更新啦
后端·程序员·intellij idea
@昵称不存在2 小时前
Flask input 和datalist结合
后端·python·flask
zhuyasen2 小时前
Go 分布式任务和定时任务太难?sasynq 让异步任务从未如此简单
后端·go
东林牧之3 小时前
Django+celery异步:拿来即用,可移植性高
后端·python·django
超浪的晨4 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
AntBlack4 小时前
从小不学好 ,影刀 + ddddocr 实现图片验证码认证自动化
后端·python·计算机视觉
Pomelo_刘金4 小时前
Clean Architecture 整洁架构:借一只闹钟讲明白「整洁架构」的来龙去脉
后端·架构·rust
双力臂4044 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成
java·spring boot·后端·单元测试
midsummer_woo6 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端