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

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

其中编写相应的函数即可

相关推荐
Kyln.Wu30 分钟前
【python实用小脚本-211】[硬件互联] 桌面壁纸×Python梦幻联动|用10行代码实现“开机盲盒”自动化改造实录(建议收藏)
开发语言·python·自动化
Ms_Big1 小时前
ppliteseg改rknn,部署在嵌入式板,加速模型
人工智能·python·深度学习
折翼的恶魔2 小时前
数据分析:合并
python·数据分析·pandas
百锦再2 小时前
在 CentOS 系统上实现定时执行 Python 邮件发送任务
java·linux·开发语言·人工智能·python·centos·pygame
I'm a winner2 小时前
第五章:Python 数据结构:列表、元组与字典(二)
数据结构·python
番薯大佬2 小时前
Python学习-day8 元组tuple
java·python·学习
小文数模3 小时前
2025高教社国赛数学建模C题参考论文(含模型和代码)
python·数学建模·matlab
鸡哥爱技术4 小时前
Django入门笔记
笔记·python·django
猫耳君4 小时前
汽车网络安全 CyberSecurity ISO/SAE 21434 测试之一
python·安全·网络安全·汽车·iso/sae 21434·cybersecurity
勘察加熊人5 小时前
python将pdf转txt,并切割ai
数据库·python·pdf