前后端联调场景以及可能会遇到的问题
一、异地和在一起办公的方式
首先，在一起办公（同局域网）的情况，最常用的应该是直接使用后端的局域网 IP 进行联调，因为同一网络内设备可以直接通信。步骤方面，需要后端提供 IP 和端口，前端配置接口地址，可能涉及跨域问题的处理，比如后端设置 CORS，或者前端用代理。
然后是异地办公的情况，这时候不能直接访问对方的局域网 IP，需要其他方式。常用的可能有 VPN，搭建虚拟专用网络，让异地设备处于同一虚拟局域网；还有内网穿透工具，比如 ngrok、frp，把后端服务暴露到公网；另外，如果后端已经部署到测试服务器，直接用公网地址联调也是一种方式。
常用方式：
前后端联调接口时，“在一起办公” 和 “异地办公” 的核心差异在于网络是否互通：同一办公环境通常在同一局域网，网络直接可达；异地则需要通过特殊方式打通网络。以下是两种场景下最常用的联调方式及步骤，重点说明前端需要关注的操作：
一、在一起办公（同局域网环境）
常用方式：直接通过局域网 IP 联调
同一办公室的电脑通常连接同一 WiFi 或网线，处于同一局域网，可直接通过后端服务器的局域网 IP访问接口。
步骤：
后端提供接口信息 后端开发需要提供：
后端服务的局域网 IP（如 192.168.66.108，可通过 ipconfig（Windows）或 ifconfig（Mac/Linux）查询）接口端口（如 8080）接口基础路径（如 /api） 示例完整接口地址：http://192.168.66.108:8080/api/user 前端配置接口地址 前端在代码中把接口基础地址（baseURL）改为后端的局域网 IP + 端口，例如：
javascript
运行
// 以axios为例
const axiosInstance = axios.create({
baseURL: 'http://192.168.66.108:8080/api', // 后端局域网地址
timeout: 5000
});
解决跨域问题（最常见的坑） 前端本地服务（如 localhost:3000）调用后端接口（如 192.168.66.108:8080）时，因 “协议、域名、端口任一不同” 会触发浏览器跨域限制，导致接口调用失败。 解决方式（二选一）：
后端处理：让后端在服务中配置 CORS（跨域资源共享），允许前端域名访问。 示例（后端用 Node.js Express）： javascript
运行
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:3000' // 允许前端本地服务的请求
}));
前端代理：在前端开发工具（如 Webpack、Vite）中配置代理，把前端的接口请求转发到后端，规避跨域限制。 示例（Vite 配置 vite.config.js）： javascript
运行
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://192.168.66.108:8080', // 后端局域网地址
changeOrigin: true // 模拟跨域请求的Origin
}
}
}
});
此时前端代码中 baseURL 可简化为 /api（代理会自动转发到后端）。 测试接口 前端调用接口（如登录、获取数据），通过浏览器控制台的 “Network” 面板查看请求是否成功，后端配合查看日志排查问题。
二、异地办公（跨网络环境）
异地时，前端和后端的电脑不在同一局域网，无法直接通过 IP 访问，需要通过工具打通网络或使用公网地址。
常用方式及步骤：
方式 1：通过 VPN 搭建虚拟局域网（推荐，安全稳定）
VPN（虚拟专用网络）可让异地设备 “假装” 处于同一局域网，适合长期合作或对安全性要求高的场景（如公司内部系统）。
步骤：
搭建 / 连接 VPN
公司通常会提供企业 VPN（如 OpenVPN、AnyConnect），前端和后端分别通过 VPN 客户端连接到公司内网。连接成功后，双方会获得公司内网的 IP（如 10.0.1.xx），此时等同于 “同局域网”。 后续操作同 “在一起办公” 后端提供内网 IP + 端口，前端配置接口地址或代理，解决跨域（同上步骤 2-4）。
方式 2：后端用 “内网穿透” 工具暴露接口到公网（适合临时调试）
如果没有 VPN，后端可通过内网穿透工具（把局域网内的服务映射到公网），生成一个公网地址供前端访问。 常用工具：ngrok（简单易用）、frp（更灵活）、花生壳（国内）。
步骤（以 ngrok 为例）：
后端配置内网穿透
后端下载 ngrok（官网），注册账号并获取授权 token。后端在终端运行命令，把自己的服务（如 8080 端口）映射到公网： bash
./ngrok http 8080 # 映射本地8080端口到公网
运行后会生成一个公网地址（如 https://abc123.ngrok.io），后端把这个地址提供给前端。 前端配置接口地址 前端直接使用 ngrok 生成的公网地址作为 baseURL：
javascript
运行
const axiosInstance = axios.create({
baseURL: 'https://abc123.ngrok.io/api', // 公网地址
timeout: 5000
});
解决跨域 同上，要么后端配置 CORS 允许该公网域名，要么前端配置代理转发到该公网地址。
注意：免费 ngrok 的公网地址会随机变化（每次重启工具会变），适合临时调试；付费版可固定地址。
方式 3：后端部署接口到公网测试服务器（适合稳定联调）
如果项目有测试环境服务器（公网可访问），后端可先把接口部署到测试服，前端直接调用测试服的公网地址。
步骤：
后端部署接口到测试服 后端把接口代码部署到公网测试服务器（如阿里云、腾讯云），确保服务器对外开放了接口端口（如 8080），并提供测试服地址（如 http://test-api.company.com:8080）。
前端配置接口地址 前端直接使用测试服的公网地址作为 baseURL，无需考虑局域网限制：
javascript
运行
const axiosInstance = axios.create({
baseURL: 'http://test-api.company.com:8080/api',
timeout: 5000
});
测试与调试 前端调用接口，通过测试服日志或后端本地调试工具（如远程断点）排查问题。