前言
最近在调试一个 Web 应用时，遇到了一系列与浏览器跨域和私有网络访问相关的报错。场景很简单：一个部署在 http://xxxxxx.com:8082 的网页，需要调用本地 127.0.0.1:19196 的读卡器服务接口。
然而，从 PC 端到手机端，浏览器层层设卡。这篇文章记录了完整的排查思路和最终的解决方案，希望能给遇到类似问题的同学一些参考。
第一关：PC 端跨域拦截
问题现象
在 PC 端 Chrome 浏览器中打开页面，接口请求被直接拦截。打开开发者工具的 Network 面板，看到如下信息：
- Request URL :
http://127.0.0.1:19196/readcard&t=0.1... - Referrer :
http://xxxxxx.com:8082/ - 请求头显示
Provisional headers are shown，意味着请求根本没发出去，被浏览器预检（Preflight）直接拦截。
原因分析
浏览器的同源策略（CORS）判定请求跨域：
| 对比项 | 页面源 | 目标接口 |
|---|---|---|
| 协议 | http | http |
| 域名 | xxxxxx.com | 127.0.0.1 |
| 端口 | 8082 | 19196 |
只要协议、域名、端口三者有一个不同，浏览器就判定为跨域请求。这里域名和端口都不同，跨域无疑。
尝试的解决方案
由于无法修改服务端代码（读卡器服务是第三方提供的 exe 程序，不支持添加 CORS 响应头），只能从客户端入手。
方案一：Chrome 启动参数（PC 端有效）
创建 Chrome 快捷方式，在目标末尾添加：
--disable-web-security --user-data-dir="C:\ChromeDev"启动后浏览器会显示黄色警告条，此时跨域限制被禁用，PC 端问题解决。
方案二：浏览器 CORS 插件
安装 Allow CORS 或 CORS Unlocker 等扩展，一键启用/禁用，操作更可视化。
第二关：手机端私有网络访问限制
问题现象
PC 端调试通过后，在手机上打开同一页面，请求仍然失败。报错信息变为：
insecure private network
原因分析
这是 Chrome 等现代浏览器引入的 Private Network Access (PNA) 策略（也称为 CORS-RFC1918）。它的逻辑是：
一个公网 的 HTTP 页面，不允许主动向私有网络（如 127.0.0.1、192.168.x.x、10.x.x.x）发起请求。
简单说就是：不安全的页面（HTTP）不能访问你的内网设备。这个策略在 PC 端和移动端都会生效，但手机端没有命令行参数可以用。
最终解决方案
手机端 Chrome 提供了实验性开关，可以禁用该限制：
- 在 Chrome 地址栏输入：
chrome://flags - 在顶部搜索框输入：
Block insecure private network requests - 找到该选项，将其从
Default改为Disabled - 点击底部的
Relaunch重启浏览器
⚠️ 注意：只需要改这一个选项，不要把所有 Flags 都改成 Disabled，否则会大幅降低浏览器安全性。
重启后，手机端请求正常，问题彻底解决。
方案总结
| 环境 | 问题类型 | 解决方案 |
|---|---|---|
| PC 端 | CORS 跨域 | Chrome 启动参数 --disable-web-security 或 CORS 插件 |
| 手机端 | PNA 私有网络限制 | chrome://flags 中禁用 Block insecure private network requests |
安全提醒
以上方法都是临时调试手段，会显著降低浏览器安全性：
- 关闭跨域限制后，任意网站都能访问你的本地服务
- 禁用 PNA 策略后，公网 HTTP 页面可以扫描你的内网
生产环境建议：
-
将网页升级为 HTTPS
-
本地服务也启用 HTTPS（可使用自签名证书）
-
后端接口添加响应头：
Access-Control-Allow-Origin: https://your-domain.com Access-Control-Allow-Private-Network: true
结语
浏览器安全策略日益严格，从 CORS 到 PNA，每一层都在保护用户的隐私安全。作为开发者，理解这些策略背后的设计初衷，既能帮助我们快速定位问题，也能写出更安全、更健壮的代码。
如果这篇记录对你有帮助，欢迎收藏或分享给更多需要的朋友。
附：本文涉及的关键术语
- CORS（跨域资源共享）
- PNA（Private Network Access）
- Preflight Request（预检请求）
- RFC 1918（私有地址标准）