Vue3 反向代理：简单配置，告别 URL 困扰

前端

2024-01-03 13:32:29

前言

在构建 Vue3 应用时，我们经常需要与后端 API 进行交互。为了更好地管理和维护这些 API 请求，反向代理是一个非常有用的工具。反向代理可以帮助我们实现请求转发、URL 重写等功能，从而简化开发流程并提高安全性。

什么是反向代理？

反向代理是一种网络技术，它可以将请求从客户端转发到服务器。反向代理通常位于客户端和服务器之间，它可以对请求进行各种处理，例如：

请求转发：反向代理可以将请求转发到不同的服务器。这可以帮助我们实现负载均衡，或者将请求转发到不同的 API 端点。
URL 重写：反向代理可以重写请求的 URL。这可以帮助我们隐藏服务器的真实地址，或者将请求重定向到不同的 URL。
安全性：反向代理可以提供额外的安全性，例如：隐藏服务器的真实 IP 地址，或者检查请求是否合法。

Vue3 中的反向代理

在 Vue3 中，我们可以通过 axios 库轻松地配置反向代理。axios 是一个流行的 JavaScript 库，它可以帮助我们轻松地发送和接收 HTTP 请求。

安装 `axios` 库

npm install axios

配置反向代理

import axios from 'axios'

// 创建 axios 实例
const instance = axios.create({
  // 设置反向代理的 base URL
  baseURL: 'http://localhost:8080'
})

// 使用反向代理发送请求
instance.get('/api/users')
  .then((response) => {
    console.log(response.data)
  })

pathRewrite

在使用反向代理时，我们经常需要重写请求的 URL。例如，我们可以使用 pathRewrite 选项来将请求的 URL 重写为更友好的格式。

import axios from 'axios'

// 创建 axios 实例
const instance = axios.create({
  // 设置反向代理的 base URL
  baseURL: 'http://localhost:8080',
  // 设置 pathRewrite 选项
  pathRewrite: {
    '^/api/(.*)': '/$1'
  }
})

// 使用反向代理发送请求
instance.get('/api/users')
  .then((response) => {
    console.log(response.data)
  })