vue项目配置服务器代理，解决请求跨域问题

在 Vue 项目中配置代理服务器，以下是常见的两种方式：

1、基于vue-cil（webpack）框架项目

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://xxxxxx.com',  // 服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

2、基于vite框架项目

vite.config.js

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://xxxxxxxx.com', // 服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

字段说明

字段	说明
/api	被代理的请求路径前缀
target	代理的目标服务器地址
changeOrigin	修改请求头中的 Host 字段，模拟请求来自目标服务器
pathRewrite	重写请求路径，去除指定的前缀