Djang+React配合开发遇到 axios发出post，但后端接收不到参数的解决方案

最新推荐文章于 2022-10-21 00:11:31 发布
原创 最新推荐文章于 2022-10-21 00:11:31 发布 · 742 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在Django与React集成开发中，遇到Axios发送POST请求时，Django后端无法接收到参数的问题。原因是Django仅在'Content-Type': 'application/x-www-form-urlencoded'时处理request.POST。解决方案是修改后端，从请求body中加载数据。

在尝试把Django作为一个单纯的REST框架配合React进行web开发的时候遇到了使用axios发出post请求，但Django后端收不到数据的情况。
axios代码是很普通的样例代码：

axios({
   
   

	method: 'post',
	url: '/api/../register',
	data: {
   
   
		username:'aaaa',
		pwd:'123'
	}
})
最低0.47元/天 解锁文章
KenBG
关注
用Django+React构建Web版虚拟助手全流程
AI 领航者的博客
07-20 568
本教程旨在展示如何将Django的后端能力与React的前端优势相结合，构建一个具备自然语言交互能力的智能助手。涵盖从环境搭建、功能设计到部署上线的完整生命周期。fill:#333;color:#333;color:#333;fill:none;项目规划后端搭建前端开发功能集成测试部署优化扩展Django：Python的高效Web框架，自带ORM和Admin系统React：Facebook开发的JavaScript UI库，采用组件化架构虚拟助手：通过自然语言与用户交互的智能程序。
毕设项目系列教程（一）：Django+React+Neo4j实现的地质领域知识图谱系统
WwLK123的博客
09-20 1351
基于Django+React+Neo4j实现的地质领域知识图谱系统。
使用axios post 提交数据，后台获取不到
cx9977的博客
10-27 415
使用axios post 提交数据，后台获取不到 问题分析 我们的 Content-Type 变成了 application/json;charset=utf-8 然后，因为我们的参数是 JSON 对象，axios 帮我们做了一个 stringify 的处理。 而且查阅 axios 文档可以知道：axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。 那么，这就与我们服务端要求的 'Content-Type': 'application/x-www-form-urlenc
python Django 无法获取post 参数问题
weixin_30270889的博客
01-10 1093
对于 request.POST.get(name) 方式取值，需要 from 表单提交数据，如果 是ajax 提交数据，则需要做如下设置： 1.设置请求头，以from表单方式传值 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 2. 使用 qs.stringify() 将数据对象 序列化成URL的...
初识react（10）——axios使用 FormData 发送参数，后端接收不到数据
小R.的博客
04-20 1434
  在用 react 和后端交互时，曾出现 axios 使用 FormData 发送参数，后端接收不到数据的状况。在网上看到有人说是需要设置 header 头，但没什么作用。后来发现网上有这样一种写法： const instance = axios.create({ withCredentials:true }); instance.post(url,formData) .then...
react axios请求服务器，服务器接收不到参数问题
weixin_40841731的博客
10-30 2339
本人在用react写页面时。请求自己后台，发现明明传了参数，后台debug模式，查看，接收不了参数。 问题点：传参格式不正确，与后台想要的格式不一致。 业务描述：角色页面，初始化页面获取角色，分页查询，参数为分页参数 （一）不能传参时的  （第一种场景） 1、前端代码 constructor(props) { super(props) this.state = {...
[axios/利用axios请求传递后端Django]
DevOps
03-09 6609
最近在写项目,一直在钻研前端框架React 因为本人之前写项目都是用Django导致前后端不分离，当然，写的也很舒服，最近打算写一个新的项目，将前后端分离: React+ Antd + React-Router + axios + Django 前端用组件化的React前端框架,UI界面用非常好用的基于React写的Antd蚂蚁金服的项目 后端是Pythonweb框架Django这样实现了...
Django + React + axios 5) 实现前后端数据交互
Northeast_Husky的博客
12-17 1635
现在我们需要用到一个javascript lib: axios. 进入到frontend这个文件夹，安装 axios。 npm install axios@0.21.1 然后打开 package.json 文件，加入proxy这个属性。具体URL取决于你开的本地server端口。 "proxy": "http://localhost:8080", 这个属性可以省略很多重复的指定URL，现在 axios.get("http://localhost:8080/api/todos/") 可以简写成.
React + Axios + Django前后端分离CSRF问题解决方案
05-11 5575
想直接看代码的移步GitHub： https://github.com/769484623/TestWebServer CSRF 403 Forbidden这个问题从我刚开始做这个前端登录界面的时候就遇到了，但为了不耽误学习进度关闭了Django的CSRF验证选项。 现在快要做完了，就抽出了半天时间来解决了这个问题。 并不难其实，就是网上的资料有点不靠谱= = Django的...
jsonp react 获取返回值_Django+React全栈开发：文章列表
weixin_39948309的博客
11-24 135
React现在我们有了一个属于文章的API，可以添加、修改、删除、查看文章，但是对于我们的网站来说，还需要一个用户界面才行。现在开始探索一下ReactJS吧。经常听到有前端三大框架Angular、React、Vue的说法，不过React官网对自己的介绍却是这样的： A JavaScript library for building user interfaces一个用来构建用户界面的JavaScr...
解决Vue axios post请求,后台获取不到数据的问题方法
10-18
今天小编就为大家分享一篇解决Vue axios post请求,后台获取不到数据的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
React+fetch 发送post请求 处理请求头参数配置
weixin_45966674的博客
10-21 4447
可以看到 我们body中传的参数 是字符串 不能用对象 那我们用json转字符串的方法处理一下。可以看到 我们的接口给我们 报500错误了 说我们的参数不是json 我们去看一下参数。接口地址和token我都是改过的 抱歉 这个无法提供给你们 你们需要自己去寻找资源。我们接口的数据也正常的输出在了控制台上 没有任何问题。这就是一个基本的结构 例如我们这样写。然后我们来看 pust基本语法。接口返回成功 我们看一下控制台。这是我们传的就是一个json了。然后再去查看我们的参数。
@RequestBody后端接收不到前端传递的对象类的原因
skye_fly的博客
08-11 2410
记录一下自己老碰到的一个坑，后端controller层方法在使用注解@RequestBody接收前端传递的对象时，请求方式不能设置成@GetMapping，不然后端会报以下空指针异常 解决方法就是前后端请求方式都设置成post，如下图： ...
axios发post请求，后端接收不到参数的原因及解决
热门推荐
cc蒲公英的博客
06-22 1万+
axios发post请求，后端接收不到参数的原因及解决
解决Django的request.POST获取不到内容的问题
cpxsxn的博客
09-11 1891
在服务器端我用request.POST期望能获取到，但是我发现获取到的是一个空的，用reqyest.body是能获取到原始的请求内容key2=value2&key1=value1的。
react绑定事件与事件注意事项（后面加续）
weixin_42727360的博客
08-29 680
1、react可以进行绑定事件，但用的少。 componentDidmount(){ window.addEventListener(‘scroll’,this.scrollEvent); } componentWillUnmount(){ this.scrollEvent = ”; } 2、react事件对象进行绑定。 通过bind可以进行绑定。 class App exten...
转 axios 发 post 请求，后端接收不到参数的解决方案
六种鱼的博客
06-27 1438
转自 https://blog.youkuaiyun.com/csdn_yudong/article/details/79668655问题场景问题原因要点1要点2问题分析解决方案解决方案一解决方案二解决方案三解决方案四解决方案五解决方案六问题场景场景很简单，就是一个正常 axios post 请求：axios({ headers: { 'deviceCode': 'A95ZEF1-47...
django+react
最新发布
02-20
### 如何在项目中集成Django和React #### 创建Django项目 为了创建一个新的 Django 项目，需安装 Django 并运行命令来启动新项目。这一步骤会建立项目的结构框架。 ```bash django-admin startproject myproject cd myproject ``` #### 设置Django作为API服务器 为了让 React 应用与之交互，应设置 Django 来提供 RESTful API 接口。为此，通常引入 `Django Rest Framework` (DRF)，这是一个强大的工具包用于构建 Web APIs[^1]。 ```bash pip install djangorestframework ``` 编辑 `INSTALLED_APPS` 添加 `'rest_framework'`： ```python # settings.py INSTALLED_APPS = [ ... 'rest_framework', ] ``` #### 构建React应用程序 对于前端部分，在 Django 项目目录下利用 Create React App 工具快速搭建新的 React 应用程序。 ```bash npx create-react-app frontend cd frontend npm start ``` 此过程将初始化一个独立于后端服务的前端环境，允许两者分开部署或联合调试[^2]。 #### 连接前后端 要使两个平台协同工作，需要配置 CORS（跨域资源共享），以便让来自不同源的 HTTP 请求合法化。可以通过安装 django-cors-headers 中间件实现这一点。 ```bash pip install django-cors-headers ``` 接着修改 `settings.py` 文件中的中间件列表以及CORS策略: ```python MIDDLEWARE = [ ..., 'corsheaders.middleware.CorsMiddleware', # 尽量放在最上面 ] CORS_ORIGIN_ALLOW_ALL = True # 开发环境中可暂时全部放行；生产环境下建议指定白名单 ``` 另外，还需调整静态文件路径以支持 React 打包后的资源加载，并确保 URL 路由不会冲突[^3]。 #### 使用 Axios 发送请求 最后，在 React 组件内可通过 Axios 向 Django 提供的服务发起 GET/POST 等类型的网络调用，从而完成数据交换。 ```javascript import axios from "axios"; const fetchData = async () => { try { const response = await axios.get('/api/data/'); console.log(response.data); } catch (error) { console.error(error); } }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值