vue配置代理解决前端跨域的问题

文章目录

  • 一、概述
  • 二、报错现象
  • 三、通过配置代理来解决
    • 修改request.js中的baseURL为/api
    • 在vite.config.js中增加代理配置
  • 四、参考资料


一、概述

跨域是指由于浏览器的同源策略限制,向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败
在这里插入图片描述

二、报错现象

在这里插入图片描述

三、通过配置代理来解决

修改request.js中的baseURL为/api

在这里插入图片描述

在vite.config.js中增加代理配置

在这里插入图片描述
完整内容:

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},server: {proxy: {'/api': { // 匹配所有以 /api 开头的请求target: 'http://localhost:8080',  // 代理目标地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),  // 重写路径,将 /api 替换为空},},}
})

四、参考资料

https://www.bilibili.com/video/BV14z4y1N7pg?spm_id_from=333.788.player.switch&vd_source=0467ab39cc5ec5940fee22a0e7797575&p=73

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

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

相关文章

T-SQL在SQL Server中判断表、字段、索引、视图、触发器、Synonym等是否存在

SQL Server创建或者删除表、字段、索引、视图、触发器前判断是否存在。 目录 1. SQL Server创建表之前判断表是否存在 2. SQL Server新增字段之前判断是否存在 3. SQL Server删除字段之前判断是否存在 4. SQL Server新增索引之前判断是否存在 5. SQL Server判断视图是否存…

金融企业如何借力运维监控强化合规性建设?

日前,国家金融监督管理总局网站公布行政处罚信息,认定某银行存在多项违规并对其进行罚款。其中,国家金融监督管理总局认定该银行主要违规内容包括: 一、部分重要信息系统识别不全面,灾备建设和灾难恢复能力不符合监管要…

leetcode hot100 技巧

如有缺漏谬误&#xff0c;还请批评指正。 1.只出现一次的数字 利用异或运算相同得0的特点。所有出现过两次的数字都会在异或运算累加过程中被抵消。 class Solution { public:int singleNumber(vector<int>& nums) {int res0;for(int i0;i<nums.size();i) res^n…

git做commit信息时的校验

亲测可用&#xff01;不行你来打我&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 1. 文件基本信息 属性说明文件名commit-msg&#xff08;必须无扩展名&#xff0c;如 .sh 或 .txt 会导致失效&#xff09;位置仓库的 .git/hooks/ 目录下&#xff08;或全局模…

4.9/Q1,GBD数据库最新文章解读

文章题目&#xff1a;The burden of diseases attributable to high body mass index in Asia from 1990 - 2019: results from the global burden of disease study 2019 DOI&#xff1a;10.1080/07853890.2025.2483977 中文标题&#xff1a;1990 年至 2019 年亚洲高体重指数导…

Activity动态切换Fragment

Activity 动态切换 Fragment 是 Android 开发中常见的需求&#xff0c;用于构建灵活的用户界面。 以下是实现 Activity 动态切换 Fragment 的几种方法&#xff0c;以及一些最佳实践&#xff1a; 1. 使用 FragmentManager 和 FragmentTransaction (推荐) 这是最常用和推荐的方…

FreeRTOS Semaphore信号量-笔记

FreeRTOS Semaphore信号量-笔记 **一、信号量与互斥量的核心区别****二、二值信号量&#xff08;Binary Semaphore&#xff09;****1. 功能与使用场景****2. 示例&#xff1a;ADC中断与任务同步** **三、计数信号量&#xff08;Counting Semaphore&#xff09;****1. 功能与使用…

音频类网站或者资讯总结

我爱音频网&#xff1a; 我爱音频网 - 我们只谈音频&#xff0c;丰富的TWS真无线蓝牙耳机拆解报告 (52audio.com) 其他更多资讯 音频行业全品类深度剖析&#xff0c;2024市场趋势解读汇总-EDN 电子技术设计 (ednchina.com)

16.Excel:数据收集

一 使用在线协作工具 简道云。 excel的在线表格协作在国内无法使用&#xff0c;而数据采集最需要在线协作。 二 使用 excel 1.制作表格 在使用excel进行数据采集的时候&#xff0c;会制作表头给填写人&#xff0c;最好还制作一个示例。 1.输入提示 当点击某个单元格的时候&am…

JAVA虚拟机(JVM)总结,很清晰,很好理解!!

目录 java编译相关知识 Java文件编译过程 java的可跨平台性 JVM内存结构 运行期数据区域&#xff08;JDK8之后&#xff09; 本地方法栈 虚拟方法栈 程序计数器 堆 本地内存 栈帧里面的局部变量表和方法区&#xff08;元空间的区别&#xff09; 类加载器 启动类加载…

前端项目中单元测试与集成测试的管理实践

前端项目中单元测试与集成测试的管理实践 在现代前端工程化中&#xff0c;单元测试&#xff08;Unit Test&#xff09;和集成测试&#xff08;Integration Test&#xff09;已成为保障项目质量的重要手段。合理地组织和管理测试代码&#xff0c;不仅有助于持续集成&#xff0c…

【Redis】缓存和分布式锁

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【中间件】企业级中间件剖析 一、缓存&#xff08;Cache&#xff09; 概述 Redis最主要的应用场景便是作为缓存。缓存&#xff08;Cache&#xff09;是一种用于存储数据副本的技术或组件&#xff0c;…

深入解析路由策略:从流量控制到策略实施

一、网络流量双平面解析 在路由策略的设计中&#xff0c;必须明确区分两个关键平面&#xff1a; 1. 控制层面&#xff08;Control Plane&#xff09; ​​定义​​&#xff1a;路由协议传递路由信息形成的逻辑平面&#xff08;如OSPF的LSA、RIP的Response报文&#xff09;​…

从杰夫・托尔纳看 BPLG 公司的技术创新与发展

在科技与商业紧密交织的时代&#xff0c;企业的技术领导者在推动组织前行、应对复杂多变的市场环境中扮演着极为关键的角色。《对话 CTO&#xff0c;驾驭高科技浪潮》的第 6 章聚焦于杰夫・托尔纳及其所在的 BPLG 公司&#xff0c;为我们展现了一幅技术驱动企业发展的生动图景&…

UniRepLknet助力YOLOv8:高效特征提取与目标检测性能优化

文章目录 一、引言二、UniRepLknet 的框架原理&#xff08;一&#xff09;架构概述&#xff08;二&#xff09;架构优势 三、UniRepLknet 在 YOLOv8 中的集成&#xff08;一&#xff09;集成方法&#xff08;二&#xff09;代码实例 四、实验与对比&#xff08;一&#xff09;对…

比较Facebook与其他社交平台的隐私保护策略

在这个数字化的时代&#xff0c;隐私保护已成为用户和社交平台共同关注的核心议题。Facebook&#xff0c;作为全球最大的社交网络平台之一&#xff0c;其隐私保护策略一直受到广泛的关注和讨论。本文将对Facebook的隐私保护策略与其他社交平台进行比较&#xff0c;以帮助用户更…

数据结构--树

一、树的概念 树是由n(n≥0)个节点组成的有限集合&#xff0c;它满足以下条件&#xff1a; 1. 当n0时&#xff0c;称为空树 2. 当n>0时&#xff0c;有且仅有一个特定的节点称为根节点(root) 3. 其余节点可分为m(m≥0)个互不相交的有限集合&#xff0c;每个集合本身又是一…

Linux `ifconfig` 指令深度解析与替代方案指南

Linux `ifconfig` 指令深度解析与替代方案指南 一、核心功能与现状1. 基础作用2. 版本适配二、基础语法与常用操作1. 标准语法2. 常用操作速查显示所有接口信息启用/禁用接口配置IPv4地址修改MAC地址(临时)三、高级配置技巧1. 虚拟接口创建2. MTU调整3. 多播配置4. ARP控制四…

什么是分布式光伏系统?屋顶分布式光伏如何并网?

政策窗口倒计时&#xff01;分布式光伏如何破局而立&#xff1f; 2025年&#xff0c;中国分布式光伏行业迎来关键转折&#xff1a; ▸ "430"落幕——抢装潮收官&#xff0c;但考验才刚开始&#xff1b; ▸ "531"生死线——新增项目全面市场化交易启动&…

Cluster Interconnect in Oracle RAC

Cluster Interconnect in Oracle RAC (文档 ID 787420.1)​编辑转到底部 In this Document Purpose Scope Details Physical Layout of the Private Interconnect Why Do We Need a Private Interconnect ? Interconnect Failure Interconnect High Availability Private Inte…