Vite代理解决前端跨域问题 | fetch请求 | 环境变量

今天重新学习了一下前端跨域问题的解决思路和fetch请求，跨域这块主要是以Vite代理 的配置，fetch只是简单的了解了语法**；**整理成博客既方便自己复习，也希望能帮到同阶段正在学习的你们～

一、前言

前端开发中，跨域是绕不开的问题------当我们用fetch/axios 请求不同域名、端口的接口时，浏览器会因同源策略拦截请求。今天重点实操了Vite代理解决跨域 ，同时复习了**fetch**基础用法，本文会从基础到实战完整梳理。

二、跨域基础认知

2.1 什么是跨域？

同源策略是浏览器的安全机制，要求请求的【协议 、域名 、端口】三者完全一致，否则就是跨域。比如：

• 前端本地服务：http://127.0.0.1:5173（Vite 默认端口）
• 后端接口服务：http://127.0.0.1:8081端口不同，直接请求会触发跨域拦截。

2.2 跨域的表现

控制台会报类似 Access to fetch at 'xxx' from origin 'xxx' has been blocked by CORS policy 的错误，请求无法正常响应。

三、fetch 发送网络请求基础

**fetch**是浏览器原生的网络请求 API，无需引入第三方库，基础用法很简单，先看核心示例：

<script lang="ts" setup>
// 1. 基础fetch请求（直接请求第三方接口，会跨域）
fetch('http://127.0.0.1:4523/m1/8178031-7937220-default/api/get_data')
  .then(res => res.json()) // 把响应转为JSON格式
  .then(data => console.log('请求结果：', data)) // 打印返回数据
  .catch(err => console.log('请求失败：', err)) // 捕获错误
</script>

关键点

• **fetch**返回Promise对象，支持链式调用；
• 第一步**res.json()**是将响应体解析为 JSON，必须显式调用；
• 直接请求非同源接口时，必然触发跨域（下文会讲解决方法）。

四、Vite 代理配置解决跨域

开发环境下，Vite 内置了代理功能，原理是：前端请求先发给 Vite 开发服务器，再由服务器转发到目标接口（服务器之间无跨域限制），最后把结果返回给前端。

步骤1：配置环境变量

在项目根目录创建**.env**文件，统一管理接口地址，方便不同环境（开发 / 生产）切换：

# .env 文件
VITE_SERVER_URL=http://127.0.0.1:8081 # 目标接口的基础地址

注意：Vite 环境变量必须以**VITE_**开头，否则无法被客户端访问；

为了让TypeScript识别自定义环境变量，在**env.d.ts**中声明类型（避免报错）：

/// <reference types="vite/client" />

// 声明ImportMetaEnv类型，添加自定义环境变量
interface ImportMetaEnv {
    VITE_SERVER_URL: string
}

在代码中可通过**import.meta.env.VITE_SERVER_URL**获取该变量：

console.log(import.meta.env.VITE_SERVER_URL); // 输出：http://127.0.0.1:8081

步骤2：vite.config.ts配置代理

修改**vite.config.ts** ，在**server.proxy**中配置代理规则，核心代码如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig ,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig(({mode})=>{
  // 加载环境变量：mode是当前模式（dev/prod），process.cwd()是项目根目录
  const env = loadEnv(mode,process.cwd())
  
  return{
    plugins: [vue(), vueDevTools()],
    resolve: {
      alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}
    },
    // 开发服务器代理配置
    server:{
      proxy:{
        // 规则1：匹配以/liu开头的请求
        '/liu':{
          target: env.VITE_SERVER_URL, // 转发到目标地址
          changeOrigin: true, // 必选：修改请求头的Origin，模拟目标服务器的域名
        },
        // 规则2：匹配以/xxx开头的请求（带路径重写）
        '/xxx':{
          target: env.VITE_SERVER_URL,
          changeOrigin: true,
          // 路径重写：把/xxx从请求路径中移除
          rewrite:(path) => {
            console.log('原始路径：', path) // 比如请求/xxx/liu/1，打印/xxx/liu/1
            return path.replace('/xxx','') // 重写后路径为/liu/1
          },
        }
      }
    }
  }
})

步骤3：前端发送代理请求

配置完代理后，前端请求路径改为【代理前缀】，无需写完整域名：

<script lang="ts" setup>
// 1. 匹配/liu代理规则：请求会转发到 http://127.0.0.1:8081/liu/hello
fetch('/liu/hello')
  .then(res => res.json())
  .then(data => console.log('/liu/hello响应：', data))
  .catch(err => console.log(err))

// 2. 匹配/xxx代理规则：
// 原始请求路径：/xxx/liu/1
// 重写后路径：/liu/1 → 转发到 http://127.0.0.1:8081/liu/1
fetch('/xxx/liu/1')
  .then(res => res.json())
  .then(data => console.log('/xxx/liu/1响应：', data))
  .catch(err => console.log(err))
</script>

成功打通

代理规则解析

• /liu 规则：请求/liu/hello → 转发到 http://127.0.0.1:8081/liu/hello；
• 规则**/xxx** ：通过**rewrite** 移除/xxx前缀，请求/xxx/liu/1 → 转发到http://127.0.0.1:8081**/liu/1**；
• changeOrigin : true：解决跨域的关键，让后端认为请求来自目标服务器，而非前端本地。

---

五、 总结

今天的核心知识点可归纳为 3 点：

1. **fetch**是浏览器原生请求API，需注意链式调用和跨域限制；
2. Vite 代理是开发环境解决跨域的一种解绝方式，核心是【前端→Vite 服务器→后端】的转发流程；
3. 环境变量 + TypeScript 类型声明，能让代理配置更灵活、更规范；

如果你处于学习阶段，这些代码哪怕看起来简单，但也要经过实操后，才能从"理论"--->''现实''。