前端端口号为8080

后端端口号为5000

后端端口API 代码片.

@app.route('/predict', methods=['POST'])
def predict():if request.method == 'POST':response = request.get_json()data_str = response['file']point = data_str.find(',')base64_str = data_str[point:]  # 将前端发过来的base64图片进行解码，并转为 numpy 矩阵 image = base64.b64decode(base64_str)  # img_bytes = image.read()class_id, class_name = get_prediction(image_bytes=image)return jsonify({'class_id': class_id, 'class_name': class_name})

问题描述

若前端8080端口直接调用后端5000的API接口，则存在跨域问题，无法访问

问题解决

在文件夹根目录创建vue.config.js配置文件，（注意是根目录，和src文件夹同级）

vue.config.js 代码片.

// An highlighted block
module.exports = {devServer: {port: 8080, //前端接口proxy: {'/api': {//代理apitarget: "http://localhost:5000",// 代理接口(注意只要域名就够了)changeOrigin: true,//是否跨域ws: true, // proxy websocketspathRewrite: {//重写路径"^/api": ''//代理路径}}}}
}

接口路径映射

后端api接口为 http://localhost:5000/predict
则在调用该接口时，则用api代理路径代替，省略为
vue.config.js 代码片.

        uploadImg () {axios.post('/api/predict', {"file": this.base64}).then(response => {console.log(response)alert(response.data.class_name)console.log(response.data)})},

那么我们用前端访问 http://localhost:8080/api/predict，直接变成代理访问http://localhost:5000/predict路径

Vue+Flask前后端分离 Vue3跨域配置相关推荐

Vue flask前后端分离解决跨域
Vue flask前后端分离解决跨域安装axios 在项目目录下输入:npm install axios--save-dev 配置axios 在main.js中引入axios import axio ...
解决java前后端分离端口跨域问题
解决java前后端分离端口跨域问题参考文章: (1)解决java前后端分离端口跨域问题 (2)https://www.cnblogs.com/mollie-x/p/10449686.html 备忘一 ...
前后端分离的跨域解决方案
声明: 在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调试上由纯 ...
前后端分离项目跨域问题及解决方案
目录 1.什么是跨域 2.前后端分离项目中的跨域问题 3.方法一:SpringBoot后端进行处理 4.方法二:在Vue前端进行处理 5.总结 1.什么是跨域请求同域资源: 在域名 (或 ip 地址 ...
Spring Boot2.x-13前后端分离的跨域问题解决方法之Nginx
文章目录概述浏览器同源策略后台搭建 pom.xml interceptor 配置 Controller 启动测试浏览器和session 后端工程发布到服务器上问题复现通过Nginx反向代理 ...
前后端分离与跨域的解决方案（CORS的原理）
前后端分离前后端分离的好处最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小. 后台错误不会直接反映到前台,错误接秒较为友好. 由于后台是很难去探知前台页面的分布情况,而 ...
06-若依前后端分离项目跨域问题解决方式
什么是跨域跨域就是前后端分离项目前端无法把session等信息传递给后端服务器.跨域源自浏览器同源策略.同源策略是一种约定,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互. ...
vue解决线上跨域的问题_vue前后端分离解决跨域问题
用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现. vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764. ...
跨域详解！前后端分离解决跨域问题
文章目录一.为什么会出现跨域问题二.什么是跨域三.非同源限制四.跨域问题的解决方式 Jsonp前后端配合前端修改后端修改 CORS 详解响应头 5. SpringBoot解决 [方式一]全 ...

Vue+Flask前后端分离 Vue3跨域配置

Vue+Flask前后端分离 Vue3跨域配置

前端端口号为8080

后端端口号为5000

问题描述

问题解决

接口路径映射

Vue+Flask前后端分离 Vue3跨域配置相关推荐

最新文章

热门文章