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

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

其中编写相应的函数即可

相关推荐
qianbo_insist1 分钟前
c++ python 共享内存
开发语言·c++·python
凌览34 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
这里有鱼汤1 小时前
给你的DeepSeek装上实时行情,让他帮你炒股
后端·python·mcp
Tomorrow'sThinker1 小时前
[特殊字符] Excel 读取收件人 + Outlook 批量发送带附件邮件 —— Python 自动化实战
python·excel·outlook
JosieBook1 小时前
【Java编程动手学】Java常用工具类
java·python·mysql
灵智工坊LingzhiAI4 小时前
人体坐姿检测系统项目教程(YOLO11+PyTorch+可视化)
人工智能·pytorch·python
烛阴12 小时前
简单入门Python装饰器
前端·python
好开心啊没烦恼12 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
面朝大海,春不暖,花不开12 小时前
使用 Python 实现 ETL 流程:从文本文件提取到数据处理的全面指南
python·etl·原型模式
2301_8050545613 小时前
Python训练营打卡Day59(2025.7.3)
开发语言·python