Vue3配置axios跨域实现过程解析


Posted in Vue.js onNovember 25, 2020

实现跨域共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,将上述代码块写入其中;

如图:

Vue3配置axios跨域实现过程解析

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配置axios跨域实现过程解析

浏览器页面:

Vue3配置axios跨域实现过程解析

剩下的就是把数据渲染到页面了。

实际示例

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/'
        }
      }
    },
  },
}

flask接口地址:

# http://127.0.0.1:8081/api/testcase/@app.route('/api/testcase/')def alltestcase(): pass

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Vue 的 v-model用法实例
Nov 23 #Vue.js
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python字典操作实例详解
2017/11/16 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python性能测试工具locust的使用
2020/12/28 Python
html5时钟实现代码
2010/10/22 HTML / CSS
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
教师找工作推荐信
2013/11/23 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
爱国教育主题班会
2015/08/14 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
JS数组去重详情
2021/11/07 Javascript
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
MySQL优化之慢日志查询
2022/06/10 MySQL