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

devtools/2024/11/6 13:18:10/

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

vite新建vue项目之后

  • vite.config.js \
javascript">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中的示例代码转换过来的
javascript">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()
});

http://www.ppmy.cn/devtools/131768.html

相关文章

RUP生命周期架构-系统架构师(八十七)

1需求管理是CMM可重复级中的6个关键过程域之一,其主要目标是()。 A 对于软件需求,必须建立基线以进行控制,软件计划,产品和活动必须与软件需求保持一致 B 客观的验证需求管理活动符合规定的标准、程序和要…

spring-data-aop Repository层的增删查改

spring-data-aop Repository层的增删查改 先介绍一下spring-data-jpa repository层的传参,使用Query时参数的运用 第一种 Query("select new com.train.spr.entities.Content(b.billAmount, b.billDate, b.id, c.customerName) " " from Bill…

网络--传输层协议--TCP

1、TCP协议的特性 面向连接(需要建立连接,才能继续通信) 面向字节流的一对一通信模式 通过流量控制和拥塞控制 -> 确保可靠传输 报头大小20字节(若带选项,最大60字节) 2、TCP报文字段 16位源端口号 和 16位目的端口号 -- 2 + 2 = 4 字节 32位序号 和 32位确认序…

Java开发配置文件的详情教程配置文件类型

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……) 2、学会Oracle数据库入门到入土用法(创作中……) 3、手把手教你开发炫酷的vbs脚本制作(完善中……) 4、牛逼哄哄的 IDEA编程利器技巧(编写中……) 5、面经吐血整理的 面试技…

vue使用方法创建组件

vue 中 创建 组件 使用 方法创建组件 vue2 中 import vueComponent from xxxx function createFn(){const creator Vue.extend(vueComponent);const instance new creator();document.appendChild(instance.$el); }vue3 中 import { createApp } from "vue"; im…

刘艳兵-DBA026-以下哪些HINT是有效的?

以下哪些HINT是有效的? A INDEX_FFS B INDEX_RS C NO_INDEX_FFS D NO_INDEX_RS 答: A INDEX_FFS C NO_INDEX_FFS INDEX_FFS 用于提示优化器对表执行快速全索引扫描(Fast Full Index Scan)。 NO_INDEX_FFS 用于…

【大数据学习 | kafka】producer之拦截器,序列化器与分区器

1. 自定义拦截器 interceptor是拦截器&#xff0c;可以拦截到发送到kafka中的数据进行二次处理&#xff0c;它是producer组成部分的第一个组件。 public static class MyInterceptor implements ProducerInterceptor<String,String>{Overridepublic ProducerRecord<…

精美的美食食谱分享首页

效果图&#xff1a; 完整代码&#xff0c;图片素材如下&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&…