配置Vue项目的代理

开发的时候，你是不是经常遇到这个麻烦？前端跑在localhost:8080，而后端API在http://api.yourserver.com。浏览器一看，这俩域名对不上，立马就抛出一个跨域错误把你拦住。这时候，配置一个开发服务器代理就成了最实用的解决方案。它让你的本地服务器帮你转发请求，绕过浏览器的同源策略。

在Vue CLI项目中配置代理

如果你用的是Vue CLI创建的项目，配置代理非常直接。找到项目根目录下的vue.config.js文件（如果没有就自己创建一个）。在这个文件里，你可以通过devServer.proxy选项来设置代理规则。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.yourserver.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

这段配置的意思是：所有以/api开头的请求，都会被开发服务器代理到http://api.yourserver.com这个目标地址。changeOrigin: true会把请求头里的host改成目标地址的host，这对于一些基于host做验证的后端服务很重要。pathRewrite则把路径里多余的/api前缀去掉，这样实际请求后端的路径就是干净的。

现在，你在前端代码里就可以这样写了：

axios.get('/api/users')

实际上，这个请求会被无缝转发到http://api.yourserver.com/users，而浏览器浑然不觉。

在Vite项目中配置代理

如果你用的是更现代的Vite，配置思路一样，但写的位置不同。得去修改vite.config.js文件。

import { defineConfig } from 'vite'
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://api.yourserver.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

Vite的配置看起来更简洁一些。rewrite函数的作用和上面pathRewrite一样，用来重写请求路径。

需要注意的几个细节

代理只在开发环境下生效。当你运行npm run build构建生产包时，这些配置是不会被打进去的。所以上线前，你得确保前端请求的API地址是正确的生产环境地址，通常是通过环境变量来管理。

如果你的后端服务不在根路径，或者有更复杂的匹配规则，代理配置也支持更高级的写法，比如用对象或函数进行更精细的控制。不过对于90%的场景，上面那种简单配置已经足够应付了。

这招其实就是让本地开发服务器临时充当了一个中间人，帮你解决了开发时的跨域头疼问题。它能让你的前端开发体验流畅不少，毕竟谁也不想在写代码的时候，老被浏览器的安全策略卡脖子。