Vite代理

1 Jul 2026

1.前端开发的时候，通常会配置：

server: {
  host: '0.0.0.0', 
  port: 3000, 
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8000',
      changeOrigin: true, 
    },
  },
},

开始的时候，我不太理解，为什么需要配置一个target代理，直接发送post(“http://127.0.0.1:8800”)不行吗？
一般情况是不行的，因为跨域了，首先端口就不一样，前端3000，接口8000
但是如果后端配置了Access-Control-Allow-Origin，放行跨域，前端直接请求确实可以解决报错问题。

2.为什么配置了代理，就不存在跨域了？
vite工具自带的DevServer服务（nodejs写的），前端发送的请求发送给同源的DevServer(都是3000端口)，再由DevServer转发给后端，前端和DevServer之间不存在跨域问题，DevServer服务和后端之间更不存在跨域问题。

前端(3000)
|
DevServer(3000)
|
后端(8000)

3.生产环境是怎么做的？生产环境不存在DevServer服务，前后端分离部署的时候，怎么解决跨域的问题呢。通常使用使用Nginx，浏览器访问的是Nginx的域名（同源），Nginx 再将请求转给后端，原理与Vite代理完全一致。

前端(3000)
|
Nginx(3000)
|
后端(8000)

一个简单的Nginx配置：

server {
    listen 80;                     # Nginx 监听的端口
    server_name www.your-site.com; # 你的域名或 IP

    # 1. 处理前端静态资源（HTML/CSS/JS）
    location / {
        root /var/www/frontend/dist; # 前端打包后的文件存放路径
        try_files $uri $uri/ /index.html; 
    }

    # 2. 处理后端 API 请求（反向代理核心）
    location /api {
        proxy_pass http://127.0.0.1:8000; # 转发给本机的后端服务（端口 8000）
        
        # 将请求头中的必要信息传递给后端
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

编程