vue3+vite代理配置

代理过程

代理背景

解决问题：

前端项目未上线，运行在本地时，无法跨域请求到服务器接口

解决方法：

1. 后端配置cors
2. 前端后端通过jsonp
3. 代理（前端、后端）

注意：

前端项目上线前可以通过vite、webpack脚手架中自带的工具代理，打包上线后通过真实地址发送请求（无法再通过代理访问）

需求：

后端接口地址 http://apis.juhe.cn/list/query

一、前端发起请求

文件：index.vue

//一、直接请求接口地址
//请求地址为：/list/query
axios({url:'/list/query'})
//二、如果存在多个代理，可以加入任意标识，比如 /jjj 来区分代理接口（代理真正请求时又要删掉标识 /jjj）
//请求地址为：/jjj/list/query
axios({url:'/jjj/list/query'})
//三、请求拦截器中为url统一加入请求路径前缀 /api,并且加入/jjj开头标识
//请求地址为：/api/jjj/list/query
axios({url:'/jjj/list/query'})
// 后面两种都是代理时使用，打包上线后无法携带标识/jjj 请求真实接口，还需要在请求拦截器中统一删除或替换/jjj

二、axios请求配置，文件：axios.js

可不配置，配置后所有的请求的前面都带上/api开头

//axios request请求拦截器
axios.interceptors.request.use(config => {
  //统一处理 先删除架构自带的/api 在重新添加
  config.url=config.url.replace("/api","")
  config.url="/api"+config.url
  return config
})
// 项目上线后，请求中是不走代理的，所以真实请求中也会存在 /api开头

三、vite代理配置，文件：vite.config.js

server: {
    proxy: {
        // 情况一：直接请求接口地址，真正请求地址为：/list/query
        '/list': { 
            target: 'http://apis.juhe.cn/', // 代理的目标地址
            changeOrigin: true, // 搭建代理服务器，开启代理
            // secure: true, // 是否代理https接口
            // ws: true, // 是否代理websockets
            // rewrite: path => path.replace('', '') // 不用路径重写
        }
		// 情况二：//如果存在多个代理，为了区分代理接口，加入/jjj开头做为标识，真正请求地址为：/jjj/list/query  （否是必须以 /jjj 开头待测试）  
        '/jjj': { 
            target: 'http://apis.juhe.cn/', // 代理的目标地址
            changeOrigin: true, // 搭建代理服务器，开启代理
            // secure: true, // 是否代理https接口
            // ws: true, // 是否代理websockets
            rewrite: path => path.replace(/^\/jjj/, '') // 路径重写,请求时将/jjj开头的变成空
        }
		// 情况三：加请求前缀/api配置，匹配请求路径 /api/jjj/list/query
        '/api/jjj': { 
            target: 'http://apis.juhe.cn/', // 代理的目标地址
            changeOrigin: true, // 搭建代理服务器，开启代理
            // secure: true, // 是否代理https接口
            // ws: true, // 是否代理websockets
            rewrite: path => path.replace(/^\/api\/jjj/, '') // 路径重写,请求时将/api/jjj开头的变成空
        }

        // 多个接口地址相互切换
        '/api': {
            target: 'http://192.168.1.30:8080',  //本地后端
            // target: 'https://dev.ads.aaaaa.com', //开发环境
            // target: 'https://test.ads.aaaaa.com', //测试环境
            // target: 'http://uat.ads.aaaaa.com/', //预生产环境
            // target: 'https://adv.aaaaa.com', //生产环境
            // rewrite: path => path.replace(/^\/api/, ''),
            changeOrigin: true
        }
    }
},
// 注意匹配顺序，防止精确匹配在下面，因为会优先匹配上面的

四、请求过程(情况三)

1. index.vue 发起请求，请求地址为：/jjj/idiomJie/query
2. axios.js 统一拼接请求前缀/api，请求地址为：/api/jjj/idiomJie/query
3. vite.config.js 被代理匹配到
   1. 先重新路径，请求地址为：idiomJie/query
   2. 再加入代理目标，请求地址为：http://apis.juhe.cn/idiomJie/query