Next.js使用SWR客户端拉取数据桌面正常移动端访问报错如何解决

核心触发原因 #

你的请求URL硬编码为http://localhost:8000/api/category/featured，移动端访问时该地址指向的是移动设备自身的8000端口，而非同一WiFi下桌面端运行的后端服务，请求直接失败触发<Error />组件。

其他可能诱因 #

• 桌面端防火墙/安全软件拦截了局域网访问请求，8000端口未对局域网设备开放
• 后端服务配置了CORS策略，仅允许来自localhost域名的请求，移动端使用桌面端局域网IP访问时触发跨域拦截
• Next.js服务默认绑定在127.0.0.1，仅支持本地访问，未对局域网设备开放

具体修复步骤 #

1. 首先查询桌面端在当前WiFi下的局域网IP：Windows系统在cmd执行ipconfig，Mac/Linux系统执行ifconfig或ip addr，通常为192.168.x.x格式的地址
2. 替换硬编码的请求地址，优先使用相对路径自动适配当前访问域名：

// 修改ClientFetchedComponent.js中的请求地址
const { data, error } = useSWRFetch(`/api/category/featured`)

如果后端服务与Next.js服务部署在不同端口，可配置Next.js重写规则代理请求，避免跨域问题。
3. 启动Next.js服务时指定绑定0.0.0.0，允许局域网设备访问：

npx next dev -H 0.0.0.0

4. 调整后端服务CORS配置，允许来自http://<桌面端局域网IP>:<Next.js服务端口>的跨域请求，同时关闭桌面端对应端口的防火墙拦截。

内容的提问来源于stack exchange，提问作者dEBA M