实现跨域共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/' } } }, }, }
flask接口地址:
# http://127.0.0.1:8081/api/testcase/@app.route('/api/testcase/')def alltestcase(): pass
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
重复数据在数据分析和搜索中会造成错误。在我们的实际使用中我们应该避免重复导...
本文转载自微信公众号「猿天地」,作者尹吉欢。转载本文请联系猿天地公众号。 当...
概念 程序 一组计算机能识别和执行的指令运行于电子计算机上满足人们某种需求的...
20210323第一家量产国产化蓝牙AOA高精度定位基站生态合能培训会上海站现场直播下...
原因是:我只设置了id属性 而在JSP页面使用javascript的时候用ID属性,但是在后...
12月14日消息据外媒 Windowslatest 报道,根据最新 Windows 预览版的参考,Windo...
今天主要介绍MySQL查看数据库表容量大小的几个方法,仅供参考。 1. 查看所有数据...
RedisAtomicLong分布式自增id出现重复编号 问题分析 解决方案 1.升级spring-data...
AERGO SHIP:用于开发智能合约的包管理器 用于构建、测试和部署分布式应用程序的...
之前微软放弃了Windows 7,其目的也是很简单,就是希望这些用户去升级Windows 10...