为什么后端路由需要携带 /api 作为前缀？前端如何设置基础路径 /api？

一、为什么后端路由需要携带 /api 作为前缀？

1. 区分 API 端点与其他路由

在 Web 应用程序中，后端不仅需要处理 API 请求，还可能需要处理静态资源（如 HTML、CSS、JS 文件）或其他服务（如 WebSocket）。通过为 API 路由添加 /api 前缀，可以清晰地将其与其他请求区分开来，避免路由冲突。

例如：

• API 请求：https://example.com/api/users
• 静态资源请求：https://example.com/static/style.css

2. 方便路由管理

在大型项目中，API 路由通常由多个模块组成。为所有路由添加 /api 前缀，可以方便地对路由进行分类和管理。

例如：

• 用户模块：/api/users
• 订单模块：/api/orders
• 商品模块：/api/products

3. 支持跨域请求

如果前端和后端分别部署在不同的域名或端口上，浏览器会执行跨域请求检查。通过为所有 API 路由添加 /api 前缀，可以更容易地配置跨域规则。

例如，后端可以配置 CORS 规则，只允许 /api 路径的请求：

<JAVA>

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // 只允许 /api 路径的请求
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

4. 与前端路由区分

在单页应用（SPA）中，前端通常使用虚拟路由来管理页面导航。通过为所有后端路由添加 /api 前缀，可以避免与前端路由冲突。

例如：

• 前端路由：https://example.com/dashboard
• 后端路由：https://example.com/api/dashboard

5. 方便负载均衡和反向代理

在生产环境中，API 请求通常通过负载均衡器或反向代理（如 Nginx）进行路由。通过为所有 API 路由添加 /api 前缀，可以更容易地配置转发规则。

例如，Nginx 配置：

<NGINX>

location /api/ {
    proxy_pass http://backend-server/;
}

二、前端如何设置基础路径 /api？

在前端项目中，所有对后端 API 的请求都需要携带 /api 前缀。以下是常见的实现方式：

1. 手动拼接路径

在发送请求时，手动为每个 API 添加 /api 前缀：

<JAVASCRIPT>

fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

这种方式简单直接，但在大型项目中容易出错，且维护成本较高。

2. 使用环境变量

通过环境变量定义 API 的基础路径，并在请求中使用：

<JAVASCRIPT>

const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || '/api';

fetch(`${API_BASE_URL}/users`)
  .then(response => response.json())
  .then(data => console.log(data));

在 .env 文件中定义：

REACT_APP_API_BASE_URL=/api

这种方式可以根据不同环境（如开发、测试、生产）动态修改 API 路径。

3. 使用 Axios 的全局配置

如果项目中使用 Axios 作为请求库，可以设置全局的 baseURL：

<JAVASCRIPT>

import axios from 'axios';

axios.defaults.baseURL = '/api';

axios.get('/users')
  .then(response => console.log(response.data));

4. 使用前端路由代理

在开发环境中，可以通过前端路由代理将 /api 请求转发到后端服务器。例如，在 React 项目中，可以在 package.json 或 vite.config.js 中配置代理：

<JSON>

{
  "proxy": "http://localhost:8080"
}

所有 /api 请求会被自动转发到后端服务器：

<JAVASCRIPT>

axios.get('/api/users') // 请求会被转发到 http://localhost:8080/api/users
  .then(response => response.json())
  .then(data => console.log(data));

三、总结

在 Web 应用程序中，为后端路由添加 /api 前缀是一种常见的做法，其主要原因包括：

• 区分 API 端点与其他路由。
• 方便路由管理和分类。
• 支持跨域请求和反向代理。
• 避免与前端路由冲突。

在前端项目中，可以通过以下方式设置基础路径 /api：

1. 手动拼接路径。
2. 使用环境变量。
3. 使用 Axios 的全局配置。
4. 使用前端路由代理。

通过合理的配置，可以提高项目的可维护性和开发效率。如果你正在开发一个前后端分离的项目，不妨试试上述方法，相信它会为你的工作带来便利！🚀

参考资源：

• Axios 官方文档
• Nginx 反向代理配置
• React 开发环境代理配置

希望这篇博客对你有所帮助，欢迎在评论区分享你的经验和问题！😊