一、异地和在一起办公的方式
首先，在一起办公（同局域网）的情况，最常用的应该是直接使用后端的局域网 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
- 后端服务的局域网 IP（如
-
前端配置接口地址
前端在代码中把接口基础地址（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（代理会自动转发到后端）。
- 后端处理：让后端在服务中配置 CORS（跨域资源共享），允许前端域名访问。
-
测试接口
前端调用接口（如登录、获取数据），通过浏览器控制台的 “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 }); -
测试与调试
前端调用接口，通过测试服日志或后端本地调试工具（如远程断点）排查问题。
讲解)
