Vite+React生产环境API配置异常：请求报错排查

一、正确配置多环境API地址 #

Vite通过VITE_前缀的环境变量暴露给客户端，结合.env文件实现多环境区分：

1. 创建环境配置文件

   • 项目根目录新建.env.development：

     VITE_API_BASE_URL=http://dev-api.yourdomain.com
     

   • 新建.env.production：

     VITE_API_BASE_URL=http://prod-api.yourdomain.com
     

2. 配置vite.config.js
   开发环境用server.proxy转发请求避免跨域，生产环境直接使用环境变量：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     server: {
       // 开发环境代理
       proxy: {
         '/api': {
           target: process.env.VITE_API_BASE_URL,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         }
       }
     },
     build: {
       outDir: 'dist'
     }
   })
   

3. 代码中统一调用API
   封装axios或直接使用fetch时，引入环境变量：

   import axios from 'axios'
   
   const apiClient = axios.create({
     baseURL: import.meta.env.VITE_API_BASE_URL,
     timeout: 5000
   })
   
   // 登录请求示例
   export const login = (params) => apiClient.post('/login', params)
   

二、快速排查生产环境实际请求地址 #

不用瞎猜，直接看真实请求：

• 浏览器开发者工具：按F12打开Network面板，触发登录请求后，查看Request URL字段，就能看到实际调用的API地址。
• serve启动dist：启动时加-v参数看请求日志，比如serve -v dist -l 3000，控制台会输出所有请求路径。
• Docker环境：如果用nginx部署，进入容器查看/var/log/nginx/access.log，或者在Docker启动时挂载日志目录，直接在宿主机查看。

三、解决405/404错误的常见方案 #

1. 405 Method Not Allowed #

• 检查请求方法是否与后端接口匹配：比如后端要求POST，你代码里用了GET。
• 跨域OPTIONS请求被拦截：生产环境需配置CORS，以nginx为例，在配置文件中添加：

  location /api {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
    add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    proxy_pass http://your-backend-server;
  }
  

2. 404 Not Found #

• 检查BASE_URL是否拼接正确：比如少了末尾斜杠，导致请求地址变成http://localhostapi/login，而非http://localhost/api/login。
• 生产环境未配置API转发：如果前端和后端部署在同一域名下，需在nginx等服务器配置中添加API路径转发，避免请求落到前端静态资源服务器。

四、Docker构建时的环境变量动态注入 #

不要把固定的生产环境地址打包进镜像，支持动态配置：

1. Dockerfile示例

   # 构建阶段
   FROM node:18-alpine as builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   # 构建时传入API地址参数
   ARG VITE_API_BASE_URL
   RUN npm run build
   
   # 部署阶段
   FROM nginx:alpine
   COPY --from=builder /app/dist /usr/share/nginx/html
   # 复制nginx配置
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   # 设置默认API地址，运行时可覆盖
   ENV VITE_API_BASE_URL=http://prod-api.yourdomain.com
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

2. 构建与运行

   • 构建时传参：docker build --build-arg VITE_API_BASE_URL=http://test-api.yourdomain.com -t react-app .
   • 运行时覆盖：docker run -e VITE_API_BASE_URL=http://prod-api.yourdomain.com -p 80:80 react-app

内容的提问来源于stack exchange，提问作者monkeyUser