VUE3+VITE简单的跨域代理配置

devtools/2024/12/28 8:10:45/

出于安全考虑,未设置前端白名单,前端开发时,需要配置代理。
在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据,
利用服务器与服务器间,交互,不会有跨域问题,也是完全只靠前端自己独立解决跨域的方式

应用代理前代理后
前端http://localhost:5173/cms置空
后端http://localhost:7001/apihttps://gov.cn:8080/gov-api/

在.env.development文件中补充配置

VITE_API_BASE_URL=http://localhost:7001/api // 原配置
VITE_API_BASE_URL= # 置空被代理的基地址以匹配代理
VITE_PROXY_BASE_URL=https://gov.cn:8080/gov-api/
VITE_PROXY_PATH=/api

vite.config.js文件

import { defineConfig, loadEnv } from 'vite'export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd(), '')const {VITE_PROXY_BASE_URL,VITE_PROXY_PATH} = envreturn {server: {proxy: {[VITE_PROXY_PATH]: {target: `${VITE_PROXY_BASE_URL}${VITE_PROXY_PATH}`,rewrite: path => path.replace(new RegExp(`^${VITE_PROXY_PATH}`), ''),changeOrigin: true}}}}
})

axios工具

import axios from 'axios'
const { VITE_API_BASE_URL: baseURL } = import.meta.env
const api = axios.create({ baseURL })
export default api

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

相关文章

影视仓最新接口+内置本包方法的研究(2024.12.27)

近日喜欢上了研究影视的本地仓库内置,也做了一个分享到了群里。 内置本地仓库包的好处很明显,当前线路接口都是依赖网络上的代码站存放,如果维护者删除那就GG。 虽然有高手制作了很多本地包,但推送本地包到APP,难倒一片…

TCP 和 UDP 的区别:解析网络传输协议

引言 在计算机网络的世界中,TCP(Transmission Control Protocol,传输控制协议)和 UDP(User Datagram Protocol,用户数据报协议)是两种极为重要且应用广泛的传输层协议。它们在功能、特性以及适…

Flink的三种时间语义

在流数据处理中,一个很重要也很常见的操作就是窗口计算。窗口计算与时间密不可分。 窗口的计算在分布式流处理环境中,可能会面临如下问题:数据由上游发送到下游的过程中,可能是跨节点传输的,而网络传输存在延迟&#x…

零售小程序怎么自己搭建?开个小卖铺如何留住客户?

目录 1. 零售小程序搭建的第一步,先搞清楚需求 2. 找个靠谱的开发团队,少走弯路 3. 小程序的用户体验要简单直接 随着电商的迅速发展,零售商家纷纷开始尝试通过小程序来拓展业务。今天我们聊聊如何自己搭建一个零售小程序,以及如何…

wps透视数据表

1、操作 首先选中你要的行字段表格 -> 插入 -> 透视数据表 -> 拖动行值(部门)到下方,拖动值(包裹数量、运费)到下方 2、删除 选中整个透视数据表 -> delete 如图:

vulnhub靶场-jangow-01-1.0.1(截止至获取shell)

安装靶机后我们发现我们扫描不到靶机的ip,所以我们需要修改靶机的配置文件 系统启动时,长按shift键,选择第二个选项,回车后再选择第二个选项 然后不要回车,按e,进入后向下翻 找到并删除删除“recovery nom…

apifox调用jar程序

背景:测试接口要用到签名,所以想通过apifox直接设置签名相关字段 解决方案:开始是准备些javascript脚本,但是一直存在依赖的方法找不到问题,后面知道可以调用java程序,简直方便多了 一、写java程序&#x…

手机IP地址:定义、查看与切换方法

在移动互联网时代,手机已成为我们日常生活中不可或缺的一部分。无论是浏览网页、社交互动,还是在线购物、移动支付,手机都扮演着至关重要的角色。然而,在这些便捷的网络活动中,一个关键的概念常常被忽视,那…