先聊聊跨域的烦恼，别慌，咱们慢慢整

说实话，刚开始搞 Vue3 + Vite 的时候，我也被那玩意儿跨域给整得团团转。

你想啊，本地跑前端，后端是个大服务器，接口地址不一样，浏览器一口气就给拦下来。

别急，先喝口水，哈哈，咱们一步步拆开来。

为什么会有跨域？

跨域本质上是浏览器的安全策略。

同源政策说的就是协议、域名、端口三者必须完全相同。

所以 http://localhost:5173 去请求 https://api.example.com 时就会被阻止。

这时候我们就需要“代理”，把请求先发到本地 Vite 的 dev server，再由它帮忙转发。

Vite 的 proxy 配置到底长啥样？

先打开你的 vite.config.ts。

下面给你一个Zui基本的骨架：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: ,
  server: {
    // 本机 IP 或者直接写 localhost dou行
    host: true,
    port: 5173,
    // 开启 CORS，不是必须，但有时候方便
    cors: true,
    // 真正的关键：proxy
    proxy: {
      // 把所有 /api 开头的请求dou代理过去
      '/api': {
        target: 'https://your-backend.com',
        changeOrigin: true,
        // 重写路径，把 /api 给去掉
        rewrite: path => path.replace,
        // 想kan日志？Ke以在这里加个拦截
        configure {
          proxy.on => {
            console.log;
          });
        },
      },
    },
  },
});

嘿，这段代码里Zui重要的就是那个 /api 键和它对应的对象。

记住几个点：

target后端真实地址，记得带上协议，不然报错。

changeOrigin: 把请求头里的 Host 改成目标主机，一般dou要开。

rewrite: 把前缀删掉，让后端收到的是干净的路径。

configure: 用来打日志或者自定义行为，你Ke以不写。

Ru果后端有多个服务怎么办？

比如说一个叫 /auth，一个叫 /data，还想区分开来。

其实只要再加一层键值对就行啦：

proxy: {
  '/auth': {
    target: 'https://auth.example.com',
    changeOrigin: true,
    rewrite: p => p.replace,
  },
  '/data': {
    target: 'https://data.example.com',
    changeOrigin: true,
    rewrite: p => p.replace,
  },
}

这个配置kan起来有点像路由表，其实就是告诉 Vite：“嘿，这个前缀对应哪个服务器”。

常见坑，你踩过吗？

#1 忘记改 origin 导致后台报错：

CORS 错误里经常会kan到 “Invalid Host header”。这时把 changeOrigin:true 加上就Neng解决。

#2 本地 HTTPS 与目标 HTTP 不兼容：

If you run Vite with HTTPS , and target is HTTP, 有可Neng出现 Mixed Content 警告。解决办法嘛，要么把目标改成 HTTPS，要么在 devServer 上关掉 HTTPS。

#3 路径重写写错了：

我曾经把 /api/hello 重写成了 /hello/api, 后端根本找不到接口。笑死我自己。记得在 console 打印一下Zui终 URL，确认一下才行。

Hello! 快速检查你的环境变量吧

hen多团队会把接口地址放进 .env 文件，然后在 vite.config.ts 用 { import.meta.env.VITE_API_URL }.

const apiUrl = process.env.VITE_API_URL || 'https://fallback.example.com';
proxy: {
  '/api': {
    target: apiUrl,
    changeOrigin: true,
    rewrite: p => p.replace,
  }
}

# 小技巧：在根目录新建 .env.local 来覆盖默认值，这样每个人机器上douNeng跑通，不会因为硬编码炸锅。

Aha！再聊聊本地 host 配置，那些小细节也不Neng忽视哦~

AWS、阿里云这些云服务器给你一个外网 IP，你想让本机直接访问一个自定义域名，那就得改下 hosts 文件。

# macOS / Linux
sudo nano /etc/hosts
# Windows
notepad C:\Windows\System32\drivers\etc\hosts

Add 一行：

127.0.0.1   test.myapp.local
# 或者你的局域网 IP 比如：
192.168.1.123   test.myapp.local

Aha！保存后你就Neng在浏览器里敲 http://test.myapp.local:5173/, Vite 那边还Neng继续走代理。这样跟后台同事演示时就不会被奇怪的 “localhost” 地址吓到啦。哈哈哈~

P.S. Ru果你用的是 Vant、ElementPlus 那些 UI 库，还想自动导入组件……

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
plugins: }),
  Components] })
]

The final word —— 咱就是说别怕跨域，它只是个小小拦路虎罢了！

👋 确认后端地址对不对；

📈 在 vite.config.ts 把 server.proxy 配好；

🖥️ 本地 hosts 对应好自定义域名；

📝 kan日志确认请求真的走代理了；

😎 完事儿！赶紧跑起来kankan效果吧！

end of story ———— 好啦，我也差不多该收工了~ 哈哈，有啥问题直接砸过来我这边随时待命！👋

---