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

kkkkkkkkira2024-12-31 21:43

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

应用	代理前	代理后
前端	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