一、为什么后端路由需要携带 /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：
- 手动拼接路径。
- 使用环境变量。
- 使用 Axios 的全局配置。
- 使用前端路由代理。
通过合理的配置，可以提高项目的可维护性和开发效率。如果你正在开发一个前后端分离的项目，不妨试试上述方法，相信它会为你的工作带来便利！🚀
参考资源：
希望这篇博客对你有所帮助，欢迎在评论区分享你的经验和问题！😊