【项目实训】解决前后端跨域问题

由于前端框架使用vue,后端使用flask,因此需要解决前后端通信问题

  • 在vue.config.js中修改

    module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave:false,
    })
    // 跨域配置
    module.exports = {
    devServer: { //记住,别写错了devServer//设置本地默认端口 选填
    port: 8080,
    proxy: { //设置代理,必须填
    '/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定
    target: 'http://127.0.0.1.8085', //代理的目标地址
    changeOrigin: true, //是否设置同源,输入是的
    pathRewrite: { //路径重写
    '^/api': '' //选择忽略拦截器里面的内容
    }
    }
    }
    }
    }

  • 后端visulization中修改:
    首先设置跨域:

    针对函数进行修改;
    在@app.route中改成和前端对应的url地址
    @app.route('/api/getExperienceWithOfset',methods=['POST'])
    + 函数:

    <script setup> import axios from "axios"; function getExperienceWithOfset(){ const data = { company:'阿里', job:'后端', offset:0 } axios.post('http://127.0.0.1:8085/api/getExperienceWithOfset',data).then( res=>console.log(res) ) } </script>

和项目适配的前后端交互

前端:

编写一个新的存放各个函数的文件getDataOut.js,使用axios进行通信

编写vue界面的函数

首先导入函数

然后调用该函数:

  • 出现了一些问题,在于类名称错误:
    这里一定要确保组件名称和导入的vue名称一致!!
    ### 后端
    后端需要首先解决跨域问题:

    其次后端要编写和前端对应的函数:

比如,展示相应公司相应岗位优秀面经的函数:

需要使用@app.route('/api/getExperienceWithOfset',methods=['POST'])

其中编写相应的函数即可

相关推荐
hi星尘2 小时前
深度解析:基于Python的微信小程序自动化操作实现
python·微信小程序·自动化
Doker 多克2 小时前
Django 缓存框架
python·缓存·django
miracletiger4 小时前
uv 新的包管理工具总结
linux·人工智能·python
我不会编程5554 小时前
Python Cookbook-6.10 保留对被绑定方法的引用且支持垃圾回收
开发语言·python
ʚɞ 短腿欧尼4 小时前
关系数据的可视化
python·pycharm·可视化·数据可视化·图表
PXM的算法星球7 小时前
【软件工程】面向对象编程(OOP)概念详解
java·python·软件工程
Humbunklung8 小时前
PySide6 GUI 学习笔记——常用类及控件使用方法(常用类矩阵QRectF)
笔记·python·学习·pyqt
蹦蹦跳跳真可爱5898 小时前
Python----深度学习(基于DNN的吃鸡预测)
python·深度学习·dnn
JJ1M89 小时前
Git技巧:Git Hook,自动触发,含实战分享
git·python·自动化
拓端研究室TRL9 小时前
PyMC+AI提示词贝叶斯项目反应IRT理论Rasch分析篮球比赛官方数据:球员能力与位置层级结构研究
大数据·人工智能·python·算法·机器学习