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

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

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

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

javascript 复制代码
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文件

javascript 复制代码
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  const {
    VITE_PROXY_BASE_URL,
    VITE_PROXY_PATH
  } = env

  return {
    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工具

javascript 复制代码
import axios from 'axios'
const { VITE_API_BASE_URL: baseURL } = import.meta.env
const api = axios.create({ baseURL })
export default api
相关推荐
一大树23 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
ze_juejin44 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
小样还想跑2 小时前
axios无感刷新token
前端·javascript·vue.js
用户3802258598243 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag3 小时前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长3 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
长路 ㅤ   3 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
Jinxiansen02115 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
婉婉耶5 小时前
VUE带你乘风破浪~
前端·vue.js
乌兰麦朵6 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js