vue3+vite配置方向代理详解 （例子详解）

什么是反向代理？

反向代理（Reverse Proxy）是一种服务器，它位于客户端和实际服务器之间。客户端发送请求到反向代理服务器，反向代理服务器选择目标服务器获取数据，然后将这些数据返回给客户端。在这个过程中，客户端通常不会直接与真正的服务器进行交互，反向代理服务器对外表现得就像它自己就是服务器一样。

我的后端接口为 http://localhost:8888/proxyTest

前端配置如下

axios配置：这样前端发出的每个请求 前面都会带上/api 而且baseUrl会自动带上前端服务器的ip地址+端口

代码如下：

import axios from 'axios';
const instance = axios.create({
    baseURL:'/api', // 这里的api就对应了 proxy 配置的api
    timeout: 3000, // 请求响应的时间
    withCredentials: true,// axios 默认不会携带cookie
});

export default  instance

前端请求接口如下：

代码如下：

import instance from './request.js';
//导入配置好的axios
export const getBlogList =  async (page, size) => {
    const res = await instance.get(`/getAllBlogs/${page}/${size}`)
    return res.data.data.records
}

export const getData = () =>{
    return instance.get('/proxyTest').then(res=>{
        return res.data
    })

}

以getData函数为例 当函数执行时 前端发出的请求url如下： http://127.0.0.1:3000/api/proxyTest

(axios配置里面的baseUrl '/api' )+api.js里面请求的 '/proxyTest'

Vite.config.js配置如下：

代码如下：

export default defineConfig({

  plugins: [vue()],
  server: {
    port: 3000, // 你的前端应用将监听的端口
    //前端原来发出的url  http://127.0.0.1:3000/api/proxyTest
    proxy: {

//当请求中带有/api 就会到代理服务器

//  匹配到/api => 直接将ip+port部分转换为后端真实地址+端口=>得到的结果如下=> http://localhost:8888/api/proxyTest  (axios配置里面的baseUrl '/api' )+api.js里面请求的 '/proxyTest'

      '/api': {

        target: 'http://localhost:8888/',

        changeOrigin: true, // 允许跨域

     //之后路径重写 ：替换/api变为空  http://localhost:8888/proxyTest

        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }

  }

  })

我们在vite.config.js里面配置的其实就是一台反向代理服务器

最后前端应用发出的请求如下：

但实际的请求就是 http://localhost:8888/proxyTest