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

由于前端框架使用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'])

其中编写相应的函数即可

相关推荐
灵智工坊LingzhiAI1 小时前
人体坐姿检测系统项目教程(YOLO11+PyTorch+可视化)
人工智能·pytorch·python
烛阴9 小时前
简单入门Python装饰器
前端·python
好开心啊没烦恼9 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
面朝大海,春不暖,花不开9 小时前
使用 Python 实现 ETL 流程:从文本文件提取到数据处理的全面指南
python·etl·原型模式
2301_8050545611 小时前
Python训练营打卡Day59(2025.7.3)
开发语言·python
万千思绪11 小时前
【PyCharm 2025.1.2配置debug】
ide·python·pycharm
微风粼粼12 小时前
程序员在线接单
java·jvm·后端·python·eclipse·tomcat·dubbo
云天徽上13 小时前
【PaddleOCR】OCR表格识别数据集介绍,包含PubTabNet、好未来表格识别、WTW中文场景表格等数据,持续更新中......
python·ocr·文字识别·表格识别·paddleocr·pp-ocrv5
你怎么知道我是队长13 小时前
python-input内置函数
开发语言·python
叹一曲当时只道是寻常13 小时前
Python实现优雅的目录结构打印工具
python