正向代理与反向代理：服务器概述

### Vue3 中配置和使用正向代理与反向代理 #### 配置环境概述 对于基于不同构建工具的Vue3项目，如Vue CLI 和 Vite，在开发环境中配置正向代理或反向代理的方法有所不同。 #### 使用 Vue CLI 进行反向代理配置 在 `vue.config.js` 文件中可以通过设置 `devServer.proxy` 来实现反向代理功能。这允许前端请求被转发到指定的服务端地址上处理[^2]： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:4000', ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } }, } } }; ``` 此段代码展示了如何将 `/api` 开头的所有请求重定向至本地运行于4000端口上的服务，并移除路径前缀 `/api` 后再发送给目标服务器。 #### 使用 Vite 实现正向代理配置 针对采用Vite作为打包工具的新建Vue3应用，则可以在 `vite.config.ts` 或者 `vite.config.js` 中通过定义 `server.proxy` 属性完成相同目的的操作[^4]: ```typescript import { defineConfig } from 'vite' export default defineConfig({ server: { proxy: { '/targetApi': { target: 'https://example.com/', changeOrigin: true, rewrite: (path) => path.replace(/^\/targetApi/, '') } } } }) ``` 这里指定了一个新的API路由 `/targetApi` ，它会把所有匹配该模式下的HTTP调用转交给外部站点 https://example.com 处理；同时启用了跨域资源共享(CORS)，并去除了原始URL中的特定部分以便更好地适配后端接口结构。 #### Axios 库集成与请求拦截器设定 为了简化 HTTP 请求操作以及统一管理 API 调用逻辑，通常还会结合第三方库 axios 完成更高级别的封装工作。比如创建全局实例时可预先配置好基础 URL、默认参数等信息，从而减少重复编码量的同时也提高了项目的灵活性和维护性[^1]： ```javascript // src/utils/request.js import axios from "axios"; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 根据实际部署情况调整此处变量值 }); service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if(token){ config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error)); export default service; ``` 上述片段说明了怎样利用 axios 创建自定义客户端对象，并为其附加了一个预处理器用于自动注入认证令牌（如果存在的话），确保每次发起网络通信之前都能携带必要的身份验证凭证。