react+flask后端响应正常,前端axios获取不到数据

最新推荐文章于 2024-03-27 19:22:47 发布
原创 最新推荐文章于 2024-03-27 19:22:47 发布 · 712 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flask #前端 #react.js

当React应用使用Axios调用Flask后端API时遇到获取数据失败的问题，通常是由于跨域限制。解决方法是配置Flask以允许跨域请求。参照链接中的教程，设置Flask的CORS（跨源资源共享）即可使前端成功获取数据。

react+flask后端响应正常,前端axios获取不到数据

问题说明

方便同学们进行问题对比，先贴出相关问题
react axios获取数据
前端
后端flask
在这里插入图片描述
出现的问题为:后端该接口可以返回需要的数据(使用postman测试同样奏效)
但一旦使用前端调用就会出现获取数据失败，报错error
在这里插入图片描述
在这里插入图片描述

解决方法

通过反复排查，最终发现是flask没有设置跨域保护。并查询了相关的原理。
在这里插入图片描述
设置了跨域之后就好了，具体方法详见
https://blog.youkuaiyun.com/lluozh2015/article/details/78553604
在这里记录一下，为大家排坑。

react调用flask接口
thingjustthing的博客
03-08 1351
解决flask跨域：https://www.cnblogs.com/hanbowen/p/9899088.html 采用了第三种方法： pip install flask_cors from flask_cors import * 前端渲染： 问题1、前端渲染不出数据 首先查看接口是否可以调通，如果可以调通，可以确认是传值问题 useEffect(()=>{ ...
flask后端去前端传过来的值取不到？
zxcvbbnn的博客
05-21 941
如果后端的内容类型是这样（json）的话，后端取值应该像下面一样取值 code = request.json.get('code') 只有是这两种类型的，才可以用 code = request.form.get('code') 取到值
Flask重定向后无效果前端无跳转无反应问题
YUE
12-19 2006
但由于POST请求包含请求体（Request Body），而GET请求则不包含，因此在POST请求中，浏览器会要求开发者来处理重定向，以确保用户的数据安全。问题出现的流程大致都是前端发送POST请求给后端，进行一些查库校验等，这时根据逻辑进行重定向跳转到不同的页面，检查控制台可以显示，确实进行了路由的跳转，且跳转对象的函数内也可以执行相应的代码。如果你要发POST进行重定向的跳转，可以去前端的JS中进行手动重定向，如果你要用Flask的重定向，就只需要修改请求方式为GET即可。
默认情况下通过axios发送数据，Flask如何获取？
Qlly
01-15 1439
默认情况下，axios的post请求传参是json格式，如下图 这种情况下，Flask需要先通过request.get_data()获取到数据，然后再通过json.loads()转换为dict格式
关于axios服务器(node.js)接收不到前端(vue.js)数据的解决方法之一
weixin_40587774的博客
05-24 537
问题示例图： 解决方法： 1、node.js里面引入 var bodyParser = require('body-parser'); 如果需要下载的话 cnpm install bodyParser 再加入代码 app.use(bodyParser.urlencoded({ extended:false })) 然后重启可以接受到数据 简单的登陆功能：前端vue.js <template> <form> <input type="text" placeh
基于 React+router+redux+axios和Flask+MySQL+Pytorch 的视觉问答管理系统源码.zip
01-16
基于 React + router + redux + axios 和 Flask + MySQL + Pytorch 的视觉问答管理系统源码.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者...
手机端的租房项目，前端使用react+typesctipt+less+react-router+redux+axios.zip
09-28
它被用作项目中的数据请求库，处理与后端API的交互，如获取房源数据、提交用户输入等。后端则是用Python的Flask框架构建，Flask是一个轻量级的Web服务器和Web应用框架，提供了快速开发API的能力。 项目名称...
基于 React+router+redux+axios和Flask+MySQL+Pytorch的视觉问答管理系统完整源码.zip
03-26
1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等...
基于React+router+redux+axios和Flask+MySQL+Pytorch的视觉问答管理系统.zip
最新发布
11-25
基于React+router+redux+axios和Flask+MySQL+Pytorch的视觉问答管理系统.zip
一个前后端兼备的图书管理系统，前端react，后端flask
06-21
前端发送AJAX请求（例如使用fetch或axios库）到后端，后端处理请求并返回数据，前端再根据返回的数据更新UI。跨域资源共享（CORS）策略需要在Flask服务器端进行配置，以允许来自React前端的请求。 在部署方面，前端...
web开发中，后台数据获取到了，前端显示不出来
热门推荐
qi_liufan的博客
04-19 2万+
一开始我以为是后台没有获取到数据，写了几个输出语句测试发现数据是能获取到的，那就是显示的问题，检查了各个属性发现都是对的，后来突然发现我的遍历显示的地方出现了警告，这才注意到，忘记加 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 加了之后立马就显示正常了。 ...
后端有数据前端得不到的原因之一,来看看
love_yr的博客
11-16 1138
请检查该数据是否设置了get set 方法; 页面别关,如果有用别忘了点个赞哦
[flask]异常抛出和捕获异常
jojojojoi的博客
03-27 1357
1、注册处理函数，将特定类型的异常与相应的处理函数绑定。2、在应用程序执行过程中，如果发生异常，Flask会寻找匹配的异常处理函数。3、匹配到异常处理函数后，控制权转移到异常处理函数，并执行相应的处理逻辑。5、异常处理函数可以根据需要进行自定义的异常信息返回、日志记录或其他操作。6、处理完异常后，Flask会返回相应的错误响应给客户端。
flask vue axios 发送post请求时400 bad request错误
qq_40746177的博客
03-18 923
前端使用vue,后端使用flask,使用axios发送请求.结果出现400 bad request的错误,请求没有到达后端.应该是请求体的格式问题.
Flask 中使用 JSON 响应页面的 Ajax 请求报错 TypeError: 'dict' object is not callable
太午的作业本
05-29 5814
在使用 Flask 的过程中，页面向后台发起 Ajax 请求，后台处理完成后向页面返回 JSON 数据时，会报出一个 TypeError: 'dict' object is not callable 的错误。该错误是因为直接将 {key:value} 形式的字典数据向页面传输导致的，在这里我们必须将这样的字典数据转换为 JSON字符串，才能正常向页面返回。使用 json.dumps({key:val
SpringBoot+VUE+Axios 【链接超时】 后端正常返回结果，前端却出现错误无法接收数据
weixin_45928161的博客
04-14 3826
错误提示表明前端发送的请求在默认的 2500ms 超时时间内没有得到服务器的响应，导致请求失败。timeout通过以上方法中的任意一种或多种，都可以尝试解决 Vue 前端发送请求超时的问题。
vue中axios里面返回值，获取不到
Dj_Fairy的博客
09-15 5973
原因： 因axios返回值是异步操作，获取返回值时，请求操作还未完成，就已经执行了赋值，导致结果位undefined 解决方法： async….await，async声明发放为异步方法，await等待异步操作执行完毕 举例： async getCountry(city){ let arr=[] await this.$axios.post(baseUrl+'/county2.do',qs.stringify({ cityCode:c
使用axios时post请求不到数据的解决办法
menyanyu的博客
07-12 2637
封装请求时一定要注意后端接收的post数据类型是什么，因为axios会根据前端发送的数据类型进行判断，自动设置请求头
React+Flask实现前后端交互
06-07
创建React应用并编写前端代码步骤2：构建React应用（生成build目录）步骤3：创建Flask应用，并配置以提供React的静态文件和模板步骤4：在Flask中创建API路由步骤5：在React代码中调用API（这里要注意，在整合模式下...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值