Vue3+axios+Vite配置Proxy代理解决跨域

以这个API为例:https://www.rootdata.com/Api/Doc

vite新建vue项目之后

  • vite.config.js \
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  server:{
    proxy: {
      '/rootdata':{
        target: 'https://api.rootdata.com/open/ser_inv',
        changeOrigin: true,
        rewrite: (path)=>path.replace(/^\/rootdata/, '')
      }
    }
  },
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src
    }
  }
})

  • APP.vue
    script标签中(记得pnpm install axios
    这段代码是把https://www.rootdata.com/Api/Doc中的示例代码转换过来的
import HelloWorld from './components/HelloWorld.vue'
// 导入 axios 用于发送 HTTP 请求
import { ref, onMounted } from 'vue';
import axios from 'axios';

const getdata = ()=>{
  axios.post('/rootdata', {
      query: 'ETH'
    }, {
      headers: {
        "apikey": "XXXXXXX", 这里写自己的KEY
        "language": "en",
        "Content-Type": "application/json"
      }
    })
    .then(response => {
      console.log(response);
      
    })
    .catch(error => {
      console.error("Error:", error);
    });
}
onMounted(()=>{
  getdata()
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/909400.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安卓APP渗透安全测试

1.移动安全测试点分析 1.1主要测试 客户端 数据传输 服务端 l反编译 l二次打包 l组件安全 lWebview漏洞 l数据安全 l界面劫持 l数据备份风险 lDebug调试风险 l安全策略 l数据窃听 l中间人攻击 l信息泄露 l任意修改数据包 lSQL注入 l上传漏洞 l暴力破解 l逻辑漏洞 lXSS…

CentOS 7 安装 ntp,自动校准系统时间

1、安装 ntp yum install ntp 安装好后,ntp 会自动注册成为服务,服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…

ESP-HaloPanel:用 ESP32-C2 打造超低成本智能家居面板

项目简介 在生活品质日益提升的今天,智能家居系统已经走进了千家万户,并逐渐成为现代生活的一部份。与此同时,一款设计精致、体积轻盈、操作简便的全屋智能家居控制面板,已经成为众多家庭的新宠。这种高效、直观的智能化的解决方…

如何用ChatGPT结合Python处理遥感数据

在科技飞速发展的时代,遥感数据的精准分析已经成为推动各行业智能决策的关键工具。从无人机监测农田到卫星数据支持气候研究,空天地遥感数据正以前所未有的方式为科研和商业带来深刻变革。然而,对于许多专业人士而言,如何高效地处…

TCP Analysis Flags 之 TCP Keep-Alive

前言 默认情况下,Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态,并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时,会对每个 TCP 数据包进行一次分析,数据包按照它们在数据包列表中出现的顺序进行处理。可…

使用buildx构建多架构平台镜像

1. 查看buildx插件信息 比较新的docker-ce版本默认已经集成了buildx插件 [rootdocker ~]# docker buildx version github.com/docker/buildx v0.11.2 9872040 [rootdocker ~]#2. 增加多平台镜像构建支持 通过tonistiigi/binfmt:latest初始化一个基于容器的构建环境&#xff…

【Linux】编辑器vim 与 编译器gcc/g++

目录 一、编辑器vim: 1、对vim初步理解: 2、vim的模式: 3、进入与退出: 4、vim命令模式下的指令集: 移动光标: 删除: cv: 撤销: 其他: 5、vim底行模…

面试总结!

OSI七层模型: 什么是OSI七层模型? 我们需要了解互联网的本质是一系列的网络协议,这个协议就叫做OSI协议(开放系统互联(Open System Interconnection)),它是由ISO(国际标准化组织&…

人工智能技术:未来生活的“魔法师”

想象一下,未来的某一天,你醒来时,智能助手已经为你准备好了早餐,你的智能家居系统根据你的心情和日程安排调整了室内的光线和音乐,而你的自动驾驶汽车已经在门口等你。这不是科幻小说,这是人工智能技术为我…

Multi Agents协作机制设计及实践

01 多智能体协作机制的背景概述 在前述博客中,我们利用LangChain、AutoGen等开发框架构建了一个数据多智能体的平台,并使用了LangChain的Multi-Agents框架。然而,在实施过程中,我们发现现有的框架存在一些局限性,这些…

100、Python并发编程:保护临界资源的最简单方式,加锁

引言 前面的文章中已经提到了并发编程中能够带来性能提升的同时,也带来了一些问题,比如对共享资源/临界资源的竞争,可能会导致状态的不一致。最终的结果是虽然性能提升了,但是结果却是错误的…… 所以,并发编程中一个…

PHP电商供应链ERP管理系统小程序源码

🚀电商供应链大揭秘!ERP管理系统如何重塑你的商业版图✨ 🔍 什么是电商供应链ERP管理系统? 电商供应链ERP管理系统是一款基于FastAdminThinkPHP开发的系统。该系统可满足电商企业管理自身进销存,帮助中小型电商企业管…

python: Parent-child form operations using ttkbootstrap

# encoding: utf-8 # 版權所有 2024 ©塗聚文有限公司 # 許可資訊查看:言語成了邀功的功臣,還需要行爲每日來值班嗎? # 描述: 主、子表單 窗體傳值 Parent-child form operations # Author : geovindu,Geovin Du 塗聚文. …

跳表原理笔记

课程地址 跳表是一种基于随机化的有序数据结构,它提出是为了赋予有序单链表以 O(logn) 的快速查找和插入的能力 创建 首先在头部创建一个 sentinel 节点,然后在 L1 层采用“抛硬币”的方式来决定 L0 层的指针是否增长到 L1 层 例如上图中,L…

医院信息化与智能化系统(17)

医院信息化与智能化系统(17) 这里只描述对应过程,和可能遇到的问题及解决办法以及对应的参考链接,并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图,可以试试PlantUML,告诉GPT你的文件结构,让他给你对应…

selenium操作已开启的浏览器,方便调试

一、谷歌浏览器配置: 在所安装的谷歌下面,执行下面命令,打开谷歌浏览器,用来selenium的操作: 注意事项:端口需要不被占用,--user-data-dir"D:\workspace\chrome-data"这个路径需要有…

深度强化学习:从理论到应用

目录 1.引言 2.什么是强化学习? 3.深度学习和强化学习的结合 4.深度强化学习的主要方法 5.深度强化学习的应用领域 6.深度强化学习的挑战与未来 7.总结 1.引言 深度强化学习(Deep Reinforcement Learning,DRL)是近年来人工…

[Linux] 进程控制之创建和终止

🪐🪐🪐欢迎来到程序员餐厅💫💫💫 主厨:邪王真眼 主厨的主页:Chef‘s blog 所属专栏:青果大战linux 总有光环在陨落,总有新星在闪烁 每日吐槽 不得不说&a…

介绍一下rand函数生成随机数(c基础)

适合对象 c语言初学者 总结语言用色&#xff0c;个人强调用红色&#xff0c;注意为易错点&#xff0c;若有问题请告诉我谢谢。(建议通过目录观看)。一定要自己动手打代码。 rand函数 是生成随机数的函数&#xff0c;但实则是伪随机数。(即是同一个值) 格式 #include<st…

vue3入门知识(一)

vue3简介 性能的提升 打包大小减少41%初次渲染快55%&#xff0c;更新渲染快133%内存减少54% 源码的升级 使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking 新的特性 1. Composition API&#xff08;组合API&#xff09; setupref与reactivecomput…