在本地开发时，我们经常遇到这样的场景：
我在自己电脑上搭建了一个Web服务，同事想在他的电脑上访问我的服务，结果却怎么也打不开，或者遇到跨域问题。
你是不是也曾经为此困惑？今天这篇文章，带你彻底搞懂局域网访问、本地DNS解析（hosts文件）、服务监听地址以及跨域的全部原理！
一、hosts文件是什么？本地DNS解析怎么回事？
当你输入一个域名（比如mylocal.test）时，操作系统首先会查找本地的hosts文件，看有没有对应的IP映射。如果有，就直接用这个IP，不再去外部DNS服务器查询。这种方式就叫本地DNS解析。
举个例子：
127.0.0.1 mylocal.test
这行配置的意思是：无论何时访问mylocal.test，都指向本机（127.0.0.1）。
原理小结：
hosts文件优先级高于外部DNS- 只对本机生效，别人电脑无感知
二、为什么同事用hosts也访问不了你的服务？
如果你的同事在他的电脑上也加上了：
127.0.0.1 mylocal.test
然后访问http://mylocal.test:3000，结果还是打不开你的服务，为什么？
原因是：
127.0.0.1在每台电脑上都代表“自己”，不是你那台电脑。- 他访问的其实是他自己电脑的服务，并没有访问到你的电脑！
三、正确的网络访问方案
想让同事访问你的本地服务，应该怎么做？
1. 获取你的局域网IP
在你的电脑上，通过命令行获取局域网IP（如192.168.1.100）。
2. 同事的hosts文件配置
让同事在他的hosts文件里加上：
192.168.1.100 mylocal.test
这样，他访问mylocal.test时，就会去找你的电脑。
3. 服务监听地址要对外
启动你的Web服务时，监听0.0.0.0而不是127.0.0.1。
127.0.0.1：只允许本机访问0.0.0.0：允许局域网内其他设备访问
四、 跨域问题的本质与解决方法
4.1 什么是跨域？
跨域是指：浏览器出于安全考虑，限制了不同“源”（协议、域名、端口不同）之间的请求，防止恶意网站窃取数据。
4.2 跨域的常见场景
- 前端页面在 A 服务器，接口在 B 服务器
- 本地开发时，前端页面和接口端口不同
4.3 如何解决跨域？
服务端设置 CORS 响应头，允许指定的来源访问。
-
Node.js（Express）：
// 安装cors中间件 const cors = require('cors'); app.use(cors()); // 默认允许所有来源 -
手动设置响应头：
res.setHeader('Access-Control-Allow-Origin', '*');
五、总结流程图
同事电脑访问 mylocal.test:3000
|
v
hosts 文件解析为 192.168.1.100
|
v
请求发往你的电脑（192.168.1.100:3000）
|
v
你的服务监听 0.0.0.0，接收并响应请求
六、常见疑问解答
- Q：局域网IP怎么查？
A：Windows下用ipconfig，Mac/Linux下用ifconfig或ip addr。 - Q：为什么要监听0.0.0.0？
A：否则你的服务只能本机访问，别人访问不到。 - Q：跨域怎么搞定？
A：服务端配置CORS响应头，允许指定来源访问。
七、结语
本地开发环境的网络访问、域名解析和跨域问题，看似简单，细节却不少。希望这篇文章能帮你彻底理清思路，少走弯路！如果你有更多相关问题，欢迎留言交流！
