当前位置: 首页 > news >正文

vue3+ts封装axios以及解决跨域问题

目录

    • 一、前言
    • 二、封装axios
    • 三、 解决跨域
    • 四、调用接口
    • 五、运行结果

一、前言

前端请求后端数据时,会用到axios,但是如果不将axios封装好,会导致代码冗余
二次封装的好处如下:

  • 求头能统一处理
  • 便于接口的统一管理
  • 解决回调地狱
  • 配置拦截器,给不同的实例配置不同的拦截器,支持以对象形式接受多个拦截器配置

因此,在这里记录一下axios的封装过程。

二、封装axios

安装axios

npm install axios

在目录/src/utils下创建一个http的文件夹
在这里插入图片描述
request.ts文件内容如下:

import axios from 'axios';// 创建 axios 实例
const instance = axios.create({baseURL: 'http://127.0.0.1:4008/api/', // API 基础路径timeout: 100000, // 请求超时时间headers:{'Content-Type': 'application/json;charset=UTF-8',}
});// 请求拦截器
instance.interceptors.request.use(config => {// 在发送请求之前做些什么,例如添加token// config.headers['Authorization'] = 'Bearer your-token';return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么return Promise.reject(error);}
);export default instance;

api.ts文件如下:

import http from './request'export const generateVoice = (params:any) => {return http.request({method: 'POST',url: '/generate_voice',headers: {'Content-Type': 'application/json'},data:JSON.stringify(params)})
}

api.ts文件的目的是为了方便管理接口,你可以把所有接口卸载这里,这样就会在后面调用时更加简洁

三、 解决跨域

vite.config.ts文件中添加如下配置

  server: {port: 4008,host: '0.0.0.0',proxy: {"/api": {target: "http://64.176.215.21:8000/",changeOrigin: false,ws: true,rewrite:(path) => path.replace(/^\/api/, "")}},},

注意 配置以上文件,你的接口就需要每次带上/api前缀

在request.ts文件中,我们已经做好了每次带上/api前缀的代码

 baseURL: 'http://127.0.0.1:4008/api/', // API 基础路径//orbaseURL: '/api/', // API 基础路径

四、调用接口

没有使用api.ts的接口

axios.post('/generate_voice',param).then(response => {console.log(response);}).catch(error => {console.error(error);});

使用api.ts封装好的接口

import {generateVoice} from '@/utils/http/api';generateVoice(param).then(response => {console.log("Voice generated successfully:", response.data);}).catch(error => {console.error("Error generating voice:", error);});

五、运行结果

可以看到控制台返回的乱码数据,表示我们请求后台成功了

在这里插入图片描述

相关文章:

vue3+ts封装axios以及解决跨域问题

目录 一、前言二、封装axios三、 解决跨域四、调用接口五、运行结果 一、前言 前端请求后端数据时,会用到axios,但是如果不将axios封装好,会导致代码冗余 二次封装的好处如下: 求头能统一处理便于接口的统一管理解决回调地狱配置…...

各厂家BI对比

帆软BI、奥威BI、永洪BI、思迈特BI、亿信华辰BI是国内知名的BI产品,不少企业在选型BI软件时都需要对这些BI软件进行了解,从中选择适合自己的一款。经过过年的发展,这些BI(商业智能)软件各自在多个行业中都有广泛的应用…...

SQL - 触发器

触发器是在插入、更新和删除语句前后自动执行的一堆SQL代码,但是触发器被触发后只会执行一次,通常我们使用触发器增强数据的一致性。创建触发器 -- 创建触发器 drop trigger if exists payments_after_insert; delimiter $$ -- 在 payments表 insert 之后…...

Redis中缓存穿透、缓存击穿、缓存雪崩的详解

如何理解Redis缓存的穿透、击穿、雪崩问题: 缓存穿透 是指缓存中和数据库中都没有数据,而用户不断访问,导致这个不存在的数据每次请求都要到存储层去查询,这样失去了意义。 缓存穿透的解决方案有哪些? 缓存null值布隆过滤增强…...

[Meachines] [Medium] Popcorn SQLI+Upload File+PAM权限提升

信息收集 IP AddressOpening Ports10.10.10.6TCP:22,80 $ nmap -p- 10.10.10.6 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 5.1p1 Debian 6ubuntu2 (Ubuntu Linux; protocol 2.0) | ssh-hostkey: …...

【Linux】python进程管理之supervisor安装使用教程

安装supervisor pip install supervisor生成配置文件 echo_supervisord_conf > /etc/supervisord.conf修改配置文件 vim /etc/supervisord.conf[unix_http_server] file/run/supervisor.sock ; the path to the socket file[supervisord] logfile/var/log/supervisord.log…...

BEM架构

视频 总结&#xff1a; BEM架构&#xff1a;一个命名类的规范而已&#xff0c;说白了就是如何给类起名字使用sass的目的&#xff1a;在<style>中模块化的使用类名&#xff0c;同时减少代码数量 1、 BEM架构 &#xff08;通义灵码查询结果&#xff09; BEM (Block Ele…...

物联网(IoT)详解

物联网&#xff08;IoT&#xff09;详解 1. IoT定义简介2. IoT工作原理3. IoT关键技术4. 物联网与互联网区别5. IoT使用场景6. 开源物联网平台7. 参考资料 1. IoT定义简介 首先第一个问题&#xff0c;什么是物联网&#xff08;IoT&#xff09;? 物联网&#xff08;英文&#…...

ansync/await 运行流程图

1、流程图&#xff1a; 2、await 之后的方法是何时执行&#xff0c;如何执行的&#xff1f; await 的方法在 Task 执行完成之后&#xff0c;通过调用 Finish 方法执行的。 具体的执行步骤是先将 MoveNext 方法注册到 Task 的回调里&#xff0c;然后在 Task 执行完后调用这个方法…...

生产环境docker nginx+php8.0镜像

生产环境docker nginxphp8.0镜像 自定义创建php8.0镜像&#xff0c;创建dockerfile FROM php:8.0-fpm# 安装系统依赖 RUN sed -i s|http://deb.debian.org/debian|http://mirrors.aliyun.com/debian|g /etc/apt/sources.list && \apt-get update && apt-get i…...

【Hadoop】核心组件深度剖析:HDFS、YARN与MapReduce的奥秘

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《大数据前沿&#xff1a;技术与应用并进》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Hadoop简介 2、Hadoop生态系统概览 二、Hadoo…...

Docker Swarm部署SpringCloud Alibaba微服务踩坑记录

为了方便部署和维护微服务项目&#xff0c;还是得上集群部署方案&#xff0c;决定采用Docker的swarm&#xff0c;为什么不是k8s&#xff0c;因为部署骑来又是个新的工具&#xff0c;之前就一直用的docker&#xff0c;自带了类k8s的工具&#xff0c;索性就直接使用swarm了&#…...

深入理解Spring Boot中的AOP应用:从基础组件到高级功能的实现

深入理解Spring Boot中的AOP应用&#xff1a;从基础组件到高级功能的实现 在现代Java开发中&#xff0c;Spring Boot因其简洁性和强大的功能而被广泛采用。而AOP&#xff08;面向切面编程&#xff09;作为Spring框架的核心特性之一&#xff0c;为开发者提供了在不修改业务代码的…...

《区块链与监管合规:在创新与规范之间寻求平衡》

区块链技术作为近年来最具创新性和颠覆性的技术之一&#xff0c;已经在金融、供应链、医疗、物联网等多个领域展现出巨大的潜力。然而&#xff0c;随着其应用的不断拓展&#xff0c;如何应对监管和合规性要求成为了区块链发展道路上一个至关重要的问题。 区块链的去中心化、匿…...

Nuxt3【服务器】server 详解

server 文件夹中的内容&#xff0c;会被自动注册为API和服务器处理程序。 服务器 API 对应路径 server/api server/api/hello.ts export default defineEventHandler((event) > {return {hello: world} })页面中使用 <script setup lang"ts"> const { da…...

防火墙技术原理与应用

防火墙概述 防火墙概念 防火墙:通过一种网络安全设备,控制安全区域间的通信,隔离有害通信,进而阻断网络攻击。一般安装在不同安全区域边界处,用于网络通信安全控制,由专用硬件或软件系统组成。 根据网络安全信任程度和需保护的对象,划分安全区域 公共外部网络:Inter…...

【BUU】[NewStarCTF 2023 公开赛道]Final -CP读取文件内容

漏洞检测 访问首页发现是ThinkPHP5 的站点 用工具扫描一下,发现存在ThinkPHP5.0.23 RCE漏洞 访问验证,写入shell 成功写入shell. 根目录发现flag,但是权限不足 提权获取flag 准备提权,这里一开始尝试了find,但是find权限不足 尝试采用cp命令,移动到web目录,发现访问还是…...

火绒安全:一款强大且高效的国产杀毒软件

火绒安全&#xff08;Huorong Security&#xff09;是一款国产的杀毒软件&#xff0c;以其轻量、高效和对系统资源占用低的特点受到广泛欢迎。与许多其他杀毒软件不同&#xff0c;火绒注重低调实用&#xff0c;旨在为用户提供无干扰且稳定的系统保护。 火绒安全的主要特点&…...

Oracle 的DBA有哪些权限

Oracle数据库的**DBA&#xff08;数据库管理员&#xff09;**拥有全部特权&#xff0c;是Oracle数据库系统最高权限的用户。DBA的权限包括但不限于&#xff1a; 1.创建和管理数据库结构&#xff1a; DBA可以创建、修改和删除数据库中的所有对象&#xff0c;如表、索引、视图等&…...

在navicat上运行sql文件

前言 本文简单介绍在navicat上运行sql文件 第一步&#xff1a; 打开navicat&#xff0c;点击连接->mysql 第二步&#xff1a; 输入连接名&#xff0c;可以随便取 然后点击确定 第三步&#xff1a; 双击连接名&#xff0c;颜色变化代表连接上了 第四步&#xff1…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...