一、異地和在一起辦公的方式
首先，在一起辦公（同局域網）的情況，最常用的應該是直接使用后端的局域網 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 }); -
測試與調試
前端調用接口，通過測試服日志或后端本地調試工具（如遠程斷點）排查問題。
講解)
