1.vue3+vite开发中axios使用及跨域问题解决

一、跨域问题解决

 1.基于vite+vue3配置时,在vite.congig.js文件server项目中添加 proxy代理

  文件名:vite.congig.js

  server: {open: true,//启动项目自动弹出浏览器port: '3000',proxy: {'/api': {target: 'http://localhost:8000/api/',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '') // 不可以省略rewrite}}

2.axios封装时设置基本路径baseURL

  const instance = axios.create({baseURL:  '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写timeout: 10000, // 请求超时时间headers: {'Content-Type': 'application/json;charset=UTF-8'}
}
);

二、provide/inject 实现axios 全区使用

  在main.js中provide

   app.provide('axios', axios)

  在组件内获取

  import { inject } from 'vue'

  const axios = inject('axios')

  axios.post()

具体代码如下:

1.axios封装http.js
import axios,{AxiosRequestConfig,AxiosResponse} from 'axios'
import { ElLoading } from 'element-plus';let loading:any;
const startLoading = ()=>{interface Options {lock: boolean;text: string;background: string;};const options:Options = {lock: true,text: "加载中...",background: "rgba(0,0,0,0.7)"}loading = ElLoading.service(options)
}
const endLoading = ()=>{loading.close()
}
const instance = axios.create({baseURL:  '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写timeout: 10000, // 请求超时时间headers: {'Content-Type': 'application/json;charset=UTF-8'}
}
);
// 请求拦截
instance.interceptors.request.use((config:AxiosRequestConfig) =>{startLoading(); //  开始loadingreturn config
})
// 响应拦截
instance.interceptors.response.use((response:AxiosResponse) =>{endLoading(); //  结束loadingreturn response;
},error =>{return Promise.reject(error)  // 错误提醒
})export default axios
2.全区应用main.js
// 加载 axios
import axios from './http'
const app = createApp(App)
// 全局挂载axios
app.provide('axios', axios)
3.组件中使用
 import { inject } from 'vue'const axios = inject('axios')// @ts-ignoreaxios.post('/api/users/register', props.registerUser)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elementPlus——图标引入+批量注册全局组件——基础积累

因为我们要根据路由配置对应的图标,也要为了后续方便更改。因此我们将所有的图标注册为全局组件。(使用之前将分页器以及矢量图注册全局组件的自定义插件)(所有图标全局注册的方法element-plus文档中已给出) 全局注册…

Docker-compose详解和LNMP搭建实战

目录 一、Docker-compose简介 1.前言 2.概述 二、Docker-compose安装 安装源获取 安装包下载 三、YAML文件格式及编写注意事项 1.简介 2.使用方法 四、Docker Compose 常用命令 五、Docker Compose 配置常用字段 六、Docker-compose搭建LNMP实战 一、Docker-compose…

MySQL的安装以及卸载

下载官网 https://www.mysql.com/ 切到下载tab页 找到 MySQL Community Server 或者 MySQL Community (GPL) Downloads --> MySQL Community Server 点击download按钮: 点击download进入下载页面选择No thanks, just start my download就可以开始下载了。 下…

【ARM】Day5 uart总线, LED点亮实验(C语言实现)

1. 思维导图 2. LED点灯实验(C语言实现) gpio.h #ifndef _LED_H__ //防止头文件重复包含_ #define _LED_H__//RCC_MP_AHB4ENSETR寄存器封装 #define RCC_MP_AHB4ENSETR (*(volatile unsigned int*)0x50000A28)//GPIO使用封装结构体 typedef struct{v…

【Linux】进程优先级

一、基本概念 Hello,大家好。本文我们要来介绍的是有关Linux下【进程优先级】,首先我们要了解的是其基本概念 在 Linux基础篇之权限 一文中我们有谈到过什么是权限,在Linux下有权限和无权限的区别在哪里。那现在的话我们就要来对比一下【权限…

js 的正则表达式(二)

1.正则表达式分类: 正则表达式分为普通字符和元字符。 普通字符: 仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。 元字符: 是一些具有特殊含…

快速连接服务器脚本 可从多个服务中选择并连接

使用 python 做一个可选择服务器登录连接的脚本 前置条件 需要有python 环境python --version 显示版本号即可检查 python 是否有 paramiko 包没有的话 python install paramiko创建一个python 文件,内容如下 # -*- coding: utf-8 -*-""" Authors: huxiaohua…

一文科普,配资门户网是什么?

配资门户网是一个为投资者提供配资服务的平台。配资是指通过借用他人资金进行投资交易的一种金融操作方式。配资门户网作为一个线上平台,为投资者提供了方便、快捷的配资服务。 配资门户网提供了多种不同的配资方案,以满足不同投资者的需求。投资者可以…

神经网络基础-神经网络补充概念-42-梯度检验

概念 梯度检验(Gradient Checking)是一种验证数值计算梯度与解析计算梯度之间是否一致的技术,通常用于确保实现的反向传播算法正确性。在深度学习中,通过梯度检验可以帮助验证你的神经网络模型是否正确地计算了梯度,从…

LVS及负载均衡群集的搭建

一、群集简介 群集是为解决某个特定问题将多台计算机组合起来形成的单个系统,由多台主机构成,但对外只表现为一个整体,相当于一台大型计算机提供服务。 互联网应用中,随着站点对硬件性能、响应速度、服务稳定性、数据可靠性等要求…

适配器模式:让不兼容的接口协同工作

在面向对象设计中,适配器模式是一种常见的结构型设计模式。它允许将不兼容的接口转换成客户端所期望的另一个接口,从而使不同的类协同工作。适配器模式的主要目的是解决不同接口之间的兼容性问题,同时也提高了代码的可重用性和灵活性。 问题…

通过Git使用GitHub

目录 一、建立个人仓库 二、配置SSH密钥 三、克隆仓库代码 四、推送代码到个人仓库 五、代码拉取 一、建立个人仓库 1.建立GitHub个人仓库,首先注册GitHub用户。注册好了之后,打开用户的界面 然后就是配置问题 配置好后拉到最下方点击create repos…

opencv进阶07-支持向量机cv2.ml.SVM_create()简介及示例

支持向量机(Support Vector Machine,SVM)是一种二分类模型,目标是寻找一个标准(称为超平面)对样本数据进行分割,分割的原则是确保分类最优化(类别之间的间隔最大)。当数据…

next.js 创建 react ant design ts 项目

环境说明:next.js 官方文档要求node版本在16.8以上。笔者使用的 node版本是16.20.1,不要使用16.13.0,笔者在使用 node16.13.0环境时创建的 react 项目点击事件无效 next.js官网截图 next.js 官网:https://nextjs.org/ react 官网…

【UniApp开发小程序】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面日期格式化 后端收藏ControllerServicemapper 评论ControllerServiceMapper 商品Controller 阅读Service 界面效果 【说明】 界面中商品的图片来源于闲鱼,若侵权请联系删除 【商品详情】 【评论】 界面实现 工具js 该工…

uniapp 微信小程序 绘制海报,长按图片分享,保存海报

uView UI 2.0 dcloud 插件市场地址 弹窗海报源码 <template><!-- 推荐商品弹窗 --><u-popup :show"haibaoShow" mode"center" round26rpx z-index10076 bgColortransparent safeAreaInsetTop close"goodsclose"><image …

WPF入门到精通:1.新建项目及项目结构

WPF&#xff08;Windows Presentation Foundation&#xff09;是一种用于创建 Windows 应用程序的技术&#xff0c;它可以通过 XAML&#xff08;Extensible Application Markup Language&#xff09;和 C# 或其他 .NET 语言来实现。WPF 提供了许多强大的 UI 控件和样式&#xf…

Azure虚拟网络对等互连

什么是Azure虚拟网络对等互联 Azure虚拟网络对等互联&#xff08;Azure Virtual Network peering&#xff09;是一种连接两个虚拟网络的方法&#xff0c;使得这两个虚拟网络能够在同一地理区域内进行通信。它通过私有IP地址在虚拟网络之间建立网络连接&#xff0c;不论是在同一…

MySQL 数据库表的基本操作

一、数据库表概述 在数据库中&#xff0c;数据表是数据库中最重要、最基本的操作对象&#xff0c;是数据存储的基本单位。数据表被定义为列的集合&#xff0c;数据在表中是按照行和列的格式来存储的。每一行代表一条唯一的记录&#xff0c;每一列代表记录中的一个域。 二、数…

星际争霸之小霸王之小蜜蜂(四)--事件监听-让小蜜蜂动起来

目录 前言 一、监听按键并作出判断 二、持续移动 三、左右移动 总结&#xff1a; 前言 今天开始正式操控我们的小蜜蜂了&#xff0c;之前学java的时候是有一个函数监听鼠标和键盘的操作&#xff0c;我们通过传过来不同的值进行判断&#xff0c;现在来看看python是否一样的实现…