本地前端开发环境报跨域错误，最推荐的处理方向是在前端构建工具中配置开发服务器代理，将请求转发到后端端口。此方案仅适用于本地开发环境，生产环境部署需改为 Nginx 反向代理或后端配置 CORS。

配置代码速用版

根据项目使用的构建工具不同，配置文件位置和语法有所区别。以下是 Vite 和 Webpack 两种常见环境的配置片段。

// Vite 项目 (vite.config.js)
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

// Webpack 项目 (vue.config.js 或 webpack.config.js)
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

为什么会这样

浏览器遵循同源策略，禁止前端页面直接向不同端口号的 backend 发送 AJAX 请求。端口号不同被视为不同源，因此触发跨域限制。开发服务器代理是在本地启动一个中间层，由服务器端发起请求，浏览器只与本地开发服务器通信，从而绕过浏览器的同源策略检查。

分步处理

第一步确认构建工具类型。查看项目根目录是否存在 vite.config.js 或 vue.config.js 文件，确认项目是基于 Vite 还是 Webpack 构建。

第二步编辑配置文件。在配置文件中找到 server 或 devServer 字段，添加 proxy 配置项，将特定路径前缀指向后端地址 http://localhost:3000。

第三步重启开发服务器。配置修改后必须停止当前运行的 npm run dev 或 npm start 进程，重新执行启动命令使配置生效。

怎么验证是否生效

打开浏览器开发者工具，切换到 Network 面板。刷新页面并触发接口请求，查看请求列表中的 Status 状态码。如果状态码为 200 且没有红色的 CORS 报错信息，说明代理配置生效。检查请求的 Request URL 应显示为本地前端地址，但响应数据来自后端。

常见坑

代理配置仅在本地开发环境生效。项目打包构建后，开发服务器不再运行，代理配置会自动失效，生产环境必须通过 Nginx 反向代理或后端开启 CORS 头解决。

路径重写规则容易出错。如果后端接口不需要 /api 前缀，必须在代理配置中设置 rewrite 或 pathRewrite 去掉前缀，否则后端会报 404 错误。

修改配置后未重启服务。大多数构建工具不支持热重载配置文件，修改 vite.config.js 或 vue.config.js 后必须手动重启进程。

常见问题

配置代理后生产环境也会生效吗

不会生效。开发服务器代理仅在本地 npm run dev 运行时有效，打包后的静态文件不包含代理逻辑。

后端需要配合修改代码吗

不需要。前端代理是在本地开发服务器层面拦截请求，后端服务感知不到代理存在，无需任何改动。

为什么配置了还是报 404

通常是路径重写配置错误。检查代理配置中的 rewrite 规则是否正确去除了前端添加的路径前缀。

参考来源

• MDN Web Docs - HTTP 访问控制 (CORS)
• Vite 官方文档 - Server Proxy 选项
• Webpack 官方文档 - DevServer Proxy 配置