为啥 vite 配置了代理，却并没有走代理地址？

vite.config.js

import { ConfigEnv, UserConfig, loadEnv } from 'vite'; import { viteMockServe } from 'vite-plugin-mock'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; import svgLoader from 'vite-svg-loader'; import path from 'path'; const CWD = process.cwd(); // https://vitejs.dev/config/ export default ({ mode }: ConfigEnv): UserCOnfig=> { const { VITE_BASE_URL } = loadEnv(mode, CWD); return { base: VITE_BASE_URL, resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, css: { preprocessorOptions: { less: { modifyVars: { hack: `true; @import (reference) "${path.resolve('src/style/variables.less')}";`, }, math: 'strict', JavascriptEnabled: true, }, }, }, plugins: [ vue(), vueJsx(), viteMockServe({ mockPath: 'mock', localEnabled: true, }), svgLoader(), ], server: { port: 3002, proxy: { '/api': { target: "http://130.124.200.10:1000", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, }; }; 

封装的 axios

// axios 配置 可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动 import isString from 'lodash/isString'; import merge from 'lodash/merge'; import type { InternalAxiosRequestConfig } from 'axios'; import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform'; import { VAxios } from './Axios'; import proxy from '@/config/proxy'; import { joinTimestamp, formatRequestDate, setObjToUrlParams } from './utils'; import { TOKEN_NAME } from '@/config/global'; import { ContentTypeEnum } from '@/constants'; const env = import.meta.env.MODE || 'development'; // 如果是 mock 模式 或 没启用直连代理 就不配置 host 会走本地 Mock 拦截 或 Vite 代理 let host = env === 'mock' || !proxy.isRequestProxy ? '' : proxy[env].host; // 数据处理，方便区分多种处理方式 const transform: AxiosTransform = { // 处理请求数据。如果数据不是预期格式，可直接抛出错误 transformRequestHook: (res, options) => { const { isTransformResponse, isReturnNativeResponse } = options; // 如果 204 无内容直接返回 const method = res.config.method?.toLowerCase(); if (res.status === 204 || method === 'put' || method === 'patch') { return res; } // 是否返回原生响应头 比如：需要获取响应头时使用该属性 if (isReturnNativeResponse) { return res; } // 不进行任何处理，直接返回 // 用于页面代码可能需要直接获取 code ，data ，message 这些信息时开启 if (!isTransformResponse) { return res.data; } // 错误的时候返回 const { data } = res; if (!data) { throw new Error('请求接口错误'); } // 这里 code 为 后台统一的字段，需要在 types.ts 内修改为项目自己的接口返回格式 const { code } = data; // 这里逻辑可以根据项目进行修改 const hasSuccess = data && code === 0; if (hasSuccess) { return data.data; } throw new Error(`请求接口错误, 错误码: ${code}`); }, // 请求前处理配置 beforeRequestHook: (config, options) => { const { apiUrl, isJoinPrefix, urlPrefix, joinParamsToUrl, formatDate, joinTime = true } = options; // 添加接口前缀 if (isJoinPrefix && urlPrefix && isString(urlPrefix)) { config.url = `${urlPrefix}${config.url}`; } // 将 baseUrl 拼接 if (apiUrl && isString(apiUrl)) { config.url = `${apiUrl}${config.url}`; } const params = config.params || {}; const data = config.data || false; if (formatDate && data && !isString(data)) { formatRequestDate(data); } if (config.method?.toUpperCase() === 'GET') { if (!isString(params)) { // 给 get 请求加上时间戳参数，避免从缓存中拿数据。 config.params = Object.assign(params || {}, joinTimestamp(joinTime, false)); } else { // 兼容 restful 风格 config.url = `${config.url + params}${joinTimestamp(joinTime, true)}`; config.params = undefined; } } else if (!isString(params)) { if (formatDate) { formatRequestDate(params); } if ( Reflect.has(config, 'data') && config.data && (Object.keys(config.data).length > 0 || data instanceof FormData) ) { config.data = data; config.params = params; } else { // 非 GET 请求如果没有提供 data ，则将 params 视为 data config.data = params; config.params = undefined; } if (joinParamsToUrl) { config.url = setObjToUrlParams(config.url as string, { ...config.params, ...config.data }); } } else { // 兼容 restful 风格 config.url += params; config.params = undefined; } return config; }, // 请求拦截器处理 requestInterceptors: (config, options) => { // 请求之前处理 config const token = localStorage.getItem(TOKEN_NAME); if (token && (config as Recordable)?.requestOptions?.withToken !== false) { // jwt token (config as Recordable).headers.Authorization = options.authenticationScheme ? `${options.authenticationScheme} ${token}` : token; } return config as InternalAxiosRequestConfig; }, // 响应拦截器处理 responseInterceptors: (res) => { return res; }, // 响应错误处理 responseInterceptorsCatch: (error: any) => { const { config } = error; if (!config || !config.requestOptions.retry) return Promise.reject(error); config.retryCount = config.retryCount || 0; if (config.retryCount >= config.requestOptions.retry.count) return Promise.reject(error); config.retryCount += 1; const backoff = new Promise((resolve) => { setTimeout(() => { resolve(config); }, config.requestOptions.retry.delay || 1); }); config.headers = { ...config.headers, 'Content-Type': ContentTypeEnum.Json }; return backoff.then((config) => request.request(config)); }, }; function createAxios(opt?: Partial<CreateAxiosOptions>) { return new VAxios( merge( <CreateAxiosOptions>{ // https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes // 例如: authenticationScheme: 'Bearer' authenticationScheme: '', // 超时 timeout: 10 * 1000, // 携带 Cookie withCredentials: true, // 头信息 headers: { 'Content-Type': ContentTypeEnum.Json }, // 数据处理方式 transform, // 配置项，下面的选项都可以在独立的接口请求中覆盖 requestOptions: { // 接口地址 apiUrl: host, // 是否自动添加接口前缀 isJoinPrefix: true, // 接口前缀 // 例如: https://www.baidu.com/api // urlPrefix: '/api' urlPrefix: '/api', // 是否返回原生响应头 比如：需要获取响应头时使用该属性 isReturnNativeResponse: false, // 需要对返回数据进行处理 isTransformResponse: true, // post 请求的时候添加参数到 url joinParamsToUrl: false, // 格式化提交参数时间 formatDate: true, // 是否加入时间戳 joinTime: true, // 忽略重复请求 ignoreRepeatRequest: true, // 是否携带 token withToken: true, // 重试 retry: { count: 3, delay: 1000, }, }, }, opt || {}, ), ); } export const request = createAxios(); 

配置地址

export default { isRequestProxy: true, development: { // 开发环境接口请求 // host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com', host: 'http://130.124.200.10:1000', // 开发环境 cdn 路径 cdn: '', }, test: { // 测试环境接口地址 host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com', // 测试环境 cdn 路径 cdn: '', }, release: { // 正式环境接口地址 host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com', // 正式环境 cdn 路径 cdn: '', }, site: { // TDesign 部署特殊需要 与 release 功能一致 host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com', // 正式环境 cdn 路径 cdn: '', }, }; 

开发模式没有走代理，显示跨域