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实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue使用watch监听属性变化
Apr 30 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
php下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
JS常用算法实现代码
2016/11/14 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python 12306抢火车票脚本
2018/02/07 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python绘制热力图示例
2019/09/27 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
体育课外活动总结
2014/07/08 职场文书
职称评定个人总结
2015/03/05 职场文书
行政复议决定书
2015/06/24 职场文书
小学四年级作文之写景
2019/08/23 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python