vue+flask的跨域问题和flask无法获取post请求的问题

已于 2023-01-12 12:30:45 修改
阅读量2.9k 收藏 33
点赞数 19
分类专栏： 前端 Vue python 文章标签： flask vue.js python
于 2023-01-12 12:30:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/YAO_1212/article/details/128656318
版权

项目场景：

原先网站使用前端vue+后端express构建的，现有需求，前端的表单数据要调用python的算法，完成基于机器学习的分类任务，再将分类结果返回给前端，因此需要开启第二个后端的服务，该服务是基于python的，项目中选择flask作为后端框架（比较简易），目的就是接受前端的这个post请求，将post请求的数据作为输入，输入进相应模型，返回的结果打包为json数据给前端渲染。

项目简介

如下是前端vue要传的数据
在这里插入图片描述
在这里插入图片描述

如下为封装的toLyPredict接口（存在问题，属于问题2的post封装问题，后面会解决）
在这里插入图片描述
如下为后端flask的配置：
不需要设置页面，因为它的目的就是处理这个表单请求，调用算法，返回相应数据给前端
在这里插入图片描述
在这里插入图片描述

问题描述即解决方法

提示：这里描述项目中遇到的问题：

问题1：跨域问题

问题1-原因分析：

问题1：这个是由于前后端分离，服务的端口号不同导致的，前端服务在127.0.0.1:8080上，原先的express后端服务在127.0.0.1:3001上（express跨域问题使用cors中间件解决的），现在多了一个后端服务在flask的127.0.0.1:3002上，而先前flask中未设置跨域相关代码，因此存在跨域问题

此时提交表单，发现如下报错，提示跨域问题has been blocked by CORS policy
在这里插入图片描述

问题1-解决方案：

在后端flask中设置cors
在这里插入图片描述
解决了问题1，但是出现了如下的问题

问题2：flask后端可以收到post的请求，但无法获取请求中的数据

提交表单后，前端显示的错误500，表示服务器内部错误（于是去flask终端检查错误）在这里插入图片描述
检查flask终端，发现可以收到前端发来的post请求，但是通过print(request.form)发现，获得的是空数据
在这里插入图片描述

问题2-原因分析

这是由于post请求的解析问题，原先使用vue+express时，前端封装post请求时没有设置content-type，因为可以直接在后端express中引入中间件body-parse来解析获取post请求的body中的数据（不需要考虑请求头中的content-type）；而现在为发往flask后端的post请求，无法直接解析，flask只能识别请求头中的content-type为application/x-www-form-urlencoded或者multipart/form-data的post数据（通过postman接口测试发现，通过上述两种content-type，可以正确解析post请求，并返回数据，说明这是前端vue的post封装问题）
在这里插入图片描述

检查前端的network部分，我们可以看到，vue封装的post请求的content-type默认为application/json，此种请求flask无法解析，因此需要我们在vue中重新封该post请求，设置headers中的content-type
![在这里插入图片描述](https://img-blog.csdnimg.cn/30e4ac575d2f4884a6c94d4d2c3e5a57.p在这里插入图片描述

问题2-解决方案：

前端的封装接口处增加如下红框处代码，设置headers中的content-type为application/x-www-form-urlencoded或者multipart/form-data，这样flask就可以正确的解析获取post请求中附带的数据。
加粗样式
此时flask后端能正确获取数据
在这里插入图片描述

Vue+Flask 跨域问题解决
WqxEditor的博客
09-20 322
跨域请求是指在浏览器中，通过 AJAX 或 Fetch API 发起的 HTTP 请求，其目标地址与当前页面的域名或端口不一致。由于浏览器的同源策略限制，跨域请求默认是被禁止的。至此，您已经学会了如何在 Vue.js 和 Flask 中解决跨域请求的问题。希望本文对您有所帮助！在 Vue.js 中，可以通过配置 Axios（一种常用的 HTTP 请求库）来实现跨域请求。在 Flask 中，可以使用 Flask-CORS 扩展来解决跨域请求的问题。现在，您的 Flask 应用程序将允许来自任何域的跨域请求。
vue 和 Flask 跨域问题解决
叱咤少帅的博客
09-02 2048
背景 前端在不同域名下去调用 后端的服务，用微信打开的时候会提示跨域，无法正常拿到数据。后端如果没有开启跨域的话，会一直提示OPTIONS 的请求，或者直接无法拿到数据。因为我是运维人员，要Java开发去检查后端代码，Java开发说我的跨域开启了，是前端问题或者是运维的Nginx的问题。反正就是你推我 我推你，可能他们也比较菜。也不知道如何解决问题。 为了找到问题，并且让后端开发知道问题所在，所以我决定用Flask进行模拟。从而去解决这个问题。 解决如下： 前端代码： <!DOCT..
flask 和vue3 跨域 post请求必须两次才能成功
ziliansha的博客
01-15 209
折腾flask跨域，vue3需要2次请求
vue+flask 跨域解决
craftsman2020的博客
04-13 978
vue+flask 跨域解决 1. 问题 vue+axios调取接口时出现： response to preflight request doesn’t pass access control check: no ‘access-control-allow-origin’ header is present on the requested resource 查了是 跨域问题，找了各种办法，自己加头文件、nginx配置、修改vue config.js等均无效。。 2. 临时解决 chrome 扩展程序： A
跨域问题。
qq_45742976的博客
03-10 431
@目录在开发前后端分离的项目时（flask+vue），遇到过页面不显示的问题，查看控制台，有这样的提示 我的后端用的IP端口是，前端是。 控制台出现这个提示是由于跨域资源共享（CORS）策略导致的，也就是跨域。浏览器的同源策略是浏览器的一种安全机制，用于限制一个源的文档或脚本如何与另一个源的资源进行交互。“同源” 的定义是：协议相同（如 http 或 https）、域名相同（如 example.com）、端口号相同（如 80 或 443） 如果以上任意一项不同，浏览器就会认为这是跨域请求，并触发跨域限制。对
Flask 与 VUE 前后端跨域问题
X_xs_mxt的博客
02-07 2415
Flask跨域问题学习笔记
Vue + Flask 解决跨域限制问题
weixin_38564268的博客
03-14 3964
跨域限制的由来 目的：为了安全考虑 触发情景： 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同。如在页面强用ajax获取其他异步请求向其他网络地址发起请求。 只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操。 Flask 所做跨域处理 使用 flask_cors，对服务进行处理 from flask_cors import * a...
vue.js+axios+qs+flask跨域测试
01-19
在利用vuejs开发时，经常会遇到跨域请求数据的问题，本文利用python+flask做后台支撑，记录了在使用axios跨域请求数据时的各种问题，对于此类开发的小伙伴，有一定的借鉴意义。
Vue+Flask 接口跨域解决方法
m0_56699208的博客
07-04 1112
在前后端分离项目中常见到跨域的问题，记录一下Flask作为后端，Vue作为前端的项目时，跨域的解决方式。
Vue+Flask前后端分离 Vue3跨域配置
jieer34的博客
04-14 1555
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080后端端口号为5000问题描述问题解决接口路径映射 前端端口号为8080 后端端口号为5000 后端端口API 代码片. @app.route('/predict', methods=['POST']) def predict(): if request.method == 'POST': response = request.get_json() data_str = response['fil
关于Vue+Flask的跨域问题，为什么后端设置了跨域却仍然报错的一种情况
weixin_73962280的博客
04-11 365
在我通过vue写好的前端页面 通过onMounted()调用函数 去访问localhost:5000/menu/menus时出现跨域问题。我通过base.get_menu的路由去访问，实际上并没有再后面加上‘/’ 当我加上后就能解决问题了.而当我去检查后端时，该有的配置也配置上了。最后出现在base.js中的路由上。采用axios进行的前后端交互。这是封装好的axios。相关路由也进行了封装。
Flask实现跨域请求的处理方法
09-20
主要介绍了Flask实现跨域请求的处理方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue flask前后端分离解决跨域
Thomas_cannon的博客
02-01 761
解决Vue、flask前后端分离而产生的跨域问题
python vue+flask 跨域请求
kelebukele的博客
06-21 2132
刚部署好vue，vue作为前端，flask作为后端，在开发、测试的时候不配置nginx的时候，使用不同端口启动flask、vue，然后使用跨域请求交换数据（也可使用jsonp），在前端和后端分别允许跨域请求 在请求时加入Access-Control-Allow-Origin请求头，一般为“*”，或发起方的地址(协议、域名、端口)，如：“http:127.0.0.1:8080” 服务器响应时加入Access-Control-Allow-Headers、Access-Control-Allow-Origin响应
vue flask 跨域问题
aio1899的博客
01-25 497
　　最近一直忙着检查点测试平台的开发。之前主要是从事后端开发，现在所有的东西都需要自己一个人撸。也遇到了之前在后端服务开发中未碰到的问题，在此记录下解决的全过程。 　　前端采用vue + element的技术，开发完成后生成静态文件扔到nginx服务器上。后端用python的flask，完成之后放到gunicorn中。两个单独开发到没有什么太大问题，问题就出在将两个合在一起的时。 　...
[flask小坑] request.json 无法获取请求body的json数据
热门推荐
orangleliu 笔记本
04-28 2万+
写接口自动化测试的时候，发现用httpie发送带有put请求，flask后端api可以获取到json数据，而我用robotframework发送的请求就不行，flask的 request.json 获取到的数据为 None 怎么办？查文档，看代码呗 代码 https://github.com/pallets/flask/blob/master/flask/wrappers.py#L53...
vue 中的 跨域问题
KeBo's Blog
09-11 268
可以先参考这里, 这里把vue中跨域的原理讲清楚了，只是有两点需要注意 proxyTable: { '/api': { target: 'http://localhost:3000', changeOrigin: true, // pathRewrite: { // '^/...
解决Flask创建的post接口获取不到参数值
QingJiaoing的博客
04-06 391
看了大佬的文章，太细了，记录下，原贴连接如下：flask request未获取到参数问题解决_flask 获取不到json参数-优快云博客
vue+flask
最新发布
04-25
<think>好的，用户想了解如何将Vue与Flask集成或进行开发。我需要整理一个清晰的步骤指南，确保涵盖前后端分离的配置、跨域处理、API交互以及部署方法。 首先，根据引用[1]和[2]，常见的集成方式有两种：模板渲染和前后端分离。模板渲染可能比较简单，但现代开发更倾向于前后端分离，所以重点放在后者。需要提到创建Vue和Flask项目，并分别管理。 然后，跨域问题很重要。引用[2]中提到使用flask-cors扩展，需要详细说明如何安装和配置CORS，确保Vue前端能访问Flask的API。 接下来是API设计部分。Flask需要提供RESTful接口，比如使用/json的例子，而Vue使用axios进行调用。这部分需要代码示例，包括Flask的路由和Vue的组件方法。 部署方面，用户可能想知道如何将Vue构建后的静态文件整合到Flask中。需要解释npm run build生成dist文件夹，然后配置Flask的静态路由，引用[4]中的模板项目可能有相关参考。 还要考虑开发时的代理配置，比如在vue.config.js中设置代理，解决开发环境中的跨域问题，这样前端开发服务器可以正确转发API请求到Flask后端。 另外，可能用户需要知道项目结构的最佳实践，比如将Vue和Flask放在同一仓库的不同目录，或者分开管理。引用[3]和[4]提到了具体的项目结构，可以建议参考这些模板。 需要检查是否有遗漏的步骤，比如安装依赖、环境变量设置，或者常见的错误处理。比如，在Flask中返回JSON时使用jsonify，确保正确的Content-Type。 最后，提供相关的问题，帮助用户深入，比如性能优化、登录验证、项目结构优化等，参考之前的引用内容，确保问题覆盖可能遇到的后续疑问。</think>以下是分步指南说明如何实现Vue.js与Flask的集成开发，包含两种主流集成模式： ### 一、基础环境准备 1. 安装Node.js与Python环境 2. 创建项目文件夹 ```bash mkdir myproject && cd myproject ``` ### 二、前后端分离模式（推荐） #### 步骤1：创建Vue前端 ```bash npm install -g @vue/cli vue create frontend # 选择axios插件 ``` #### 步骤2：创建Flask后端 ```bash mkdir backend && cd backend python -m venv venv source venv/bin/activate pip install flask flask-cors ``` #### 步骤3：配置跨域访问 在`backend/app.py`中添加： ```python from flask_cors import CORS app = Flask(__name__) CORS(app, resources={r"/api/*": {"origins": "*"}}) ``` #### 步骤4：创建API接口 ```python @app.route('/api/data') def get_data(): return jsonify({"message": "Hello from Flask!"}) ``` #### 步骤5：前端调用接口 在Vue组件中使用： ```javascript axios.get('http://localhost:5000/api/data') .then(response => { this.message = response.data.message }) ``` ### 三、模板整合模式 #### 步骤1：构建Vue项目 ```bash cd frontend npm run build ``` #### 步骤2：整合到Flask模板 将生成的`dist`文件夹复制到Flask的`static`目录，创建路由： ```python @app.route('/') def index(): return render_template('index.html') ``` ### 四、开发环境配置 1. 创建`vue.config.js`配置代理： ```javascript module.exports = { devServer: { proxy: 'http://localhost:5000' } } ``` ### 五、项目结构示例 ``` myproject/ ├── frontend/ # Vue项目 │ ├── src/ │ └── package.json └── backend/ # Flask项目 ├── app.py └── requirements.txt ``` ### 六、运行流程 1. 启动Flask后端： ```bash flask run ``` 2. 启动Vue前端： ```bash npm run serve ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值