vue 跨域代理

1. vue3 vue.config.js代理

 devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8877/",
        changOrigin: true,//是否开启跨域
        pathRewrite: {//重写api，把api变成空字符，因为我们真正请求的路径是没有api的
          "^/api": ""
        }
      }
    },
  }

2.vite.config.js跨域代理

vue3+vite搭建页面启动之后只有localhost,
添加 host:'0.0.0.0’可以设置启动Network 为本地ip

server: {
 	host:'0.0.0.0',
    proxy: {
      '/api': {
        target: 'https://xxxx.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
 },

也可以设置不同的环境代理
1.在.env.development配置了一个域名:

`.env.development`
// 开发环境配置
VITE_BASIC_URL = https://xxxx.com

2.针对不同的环境去配置

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
  // 获取当前环境的配置
  const config = loadEnv(mode, './')
  return {
    server: {
      proxy: {
        '/api': {
          target: config.VITE_BASIC_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
  }
})