一、异地和在一起办公的方式

首先，在一起办公（同局域网）的情况，最常用的应该是直接使用后端的局域网 IP 进行联调，因为同一网络内设备可以直接通信。步骤方面，需要后端提供 IP 和端口，前端配置接口地址，可能涉及跨域问题的处理，比如后端设置 CORS，或者前端用代理。

然后是异地办公的情况，这时候不能直接访问对方的局域网 IP，需要其他方式。常用的可能有 VPN，搭建虚拟专用网络，让异地设备处于同一虚拟局域网；还有内网穿透工具，比如 ngrok、frp，把后端服务暴露到公网；另外，如果后端已经部署到测试服务器，直接用公网地址联调也是一种方式。

常用方式：

前后端联调接口时，“在一起办公” 和 “异地办公” 的核心差异在于网络是否互通：同一办公环境通常在同一局域网，网络直接可达；异地则需要通过特殊方式打通网络。以下是两种场景下最常用的联调方式及步骤，重点说明前端需要关注的操作：

同一办公室的电脑通常连接同一 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 访问，需要通过工具打通网络或使用公网地址。

VPN（虚拟专用网络）可让异地设备 “假装” 处于同一局域网，适合长期合作或对安全性要求高的场景（如公司内部系统）。

步骤：

搭建 / 连接 VPN
- 公司通常会提供企业 VPN（如 OpenVPN、AnyConnect），前端和后端分别通过 VPN 客户端连接到公司内网。
- 连接成功后，双方会获得公司内网的 IP（如 10.0.1.xx），此时等同于 “同局域网”。
后续操作同 “在一起办公”
后端提供内网 IP + 端口，前端配置接口地址或代理，解决跨域（同上步骤 2-4）。

如果没有 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
});

注意：免费 ngrok 的公网地址会随机变化（每次重启工具会变），适合临时调试；付费版可固定地址。

如果项目有测试环境服务器（公网可访问），后端可先把接口部署到测试服，前端直接调用测试服的公网地址。

步骤：

后端部署接口到测试服
后端把接口代码部署到公网测试服务器（如阿里云、腾讯云），确保服务器对外开放了接口端口（如 8080），并提供测试服地址（如 http://test-api.company.com:8080）。
前端配置接口地址
前端直接使用测试服的公网地址作为 baseURL，无需考虑局域网限制：

javascript

运行
```
const axiosInstance = axios.create({baseURL: 'http://test-api.company.com:8080/api',timeout: 5000
});
```
测试与调试
前端调用接口，通过测试服日志或后端本地调试工具（如远程断点）排查问题。