Vue笔记:Vue3配置axios跨域
2023-09-14 08:56:56 时间
实现跨域共3个步骤:
1,vue3.0根目录下创建vue.config.js文件;
module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } } } } };
2,将上述代码块写入其中;
如图:
3,将api接口放入请求的url中;
使用页面的代码块:
<template> <div> <H1>TEST</H1> <p>{{data}}</p> </div> </template> <script> import axis from 'axios'; export default { name: 'Test', data() { return { data: {}, }; }, methods: { getData() { axis.get('/api/xhr/search/queryHotKeyWord.json')//axis后面的.get可以省略; .then( (response) => { console.log(response); this.data = response; }) .catch( (error) => { console.log(error); }); }, }, mounted() { this.getData(); }, }; </script> <style scoped> </style>
代码解析:
浏览器页面:
剩下的就是把数据渲染到页面了。
实际示例
vue3 8080端口请求flask8081端口服务数据:
module.exports = { devServer: { host: '0.0.0.0', port: 8080, open: true, proxy: { '/api/testcase/': { target: 'http://127.0.0.1:8081/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api/testcase/': '/api/testcase/' } } }, }, }
axis.get('/api/testcase/')//axis后面的.get可以省略; .then( (response) => { console.log(response); this.totaltableData = response.data['result']; }) .catch( (error) => { console.log(error); });
flask接口地址:
# http://127.0.0.1:8081/api/testcase/ @app.route('/api/testcase/') def alltestcase(): pass
参考:https://blog.csdn.net/weixin_45264991/article/details/104182742
相关文章
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- Vue3导入方法太麻烦?试试这个不用导入方法的插件!
- Vue3中计算属性的Setter
- vue-cli 初始----安装运行Vue项目
- Vue3组件进阶--props验证类型
- Vue3组件库打包指南,一次生成esm、esm-bundle、commonjs、umd四种格式
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue生成二维码_vue视频软件怎么生成二维码
- Vue3学习笔记(四)——组件、生命周期
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- Vue调试工具安装(vue devtools)
- Vue3 Composition API 之 setup 函数
- Vue3 响应式 API 之 ref 和 reactive
- vue3+elementplus(vuex)增删改查
- 软件测试|Vue3 - 组件「上」
- Vue3学习笔记 用朴素的语言理解大名鼎鼎的响应式
- Vue3学习笔记
- vue3 +ts 如何安装封装axios
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue搭配Redis做针对性取值(vue redis取值)