如何用Chrome DevTools判断请求是否被浏览器拦截？解决CORS疑难问题

问题背景 #

本地开发时关闭了目标服务器（localhost:5000），但浏览器控制台仍抛出CORS错误，提示收到了预检请求的响应，报错信息如下：

从源 'http://localhost:3000' 访问 'http://localhost:5000/tokens' 被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' 头。如果不透明响应符合你的需求，请将请求的模式设置为 'no-cors' 以禁用CORS获取资源。

这种矛盾情况通常由以下原因导致：

• 浏览器缓存了之前的预检OPTIONS请求响应（默认缓存时长由Access-Control-Max-Age控制）
• 目标端口（5000）被其他未关闭的进程或本地代理服务占用
• 浏览器错误提示使用固定模板，未准确反映实际请求状态

可靠判断请求是否实际发送的方法 #

1. 分析浏览器Network面板 #

• 找到对应的OPTIONS预检请求，查看「Status」列：
  • 若显示(failed) net::ERR_CONNECTION_REFUSED，说明请求未实际发送，控制台报错是浏览器基于失败请求生成的通用CORS提示模板
  • 若显示具体状态码（如200、404），说明请求已发送并收到响应，需检查是否有其他服务在监听端口
• 切换到「Headers」标签：
  • 查看「Response Headers」是否存在CORS相关字段（如Access-Control-Allow-Origin），若没有则说明响应来自未配置CORS的服务或缓存的旧响应

2. 用命令行工具直接测试 #

执行以下curl命令模拟预检请求：

curl -X OPTIONS http://localhost:5000/tokens \
  -H "Origin: http://localhost:3000" \
  -H "Access-Control-Request-Method: POST"

• 若返回Connection refused，确认服务器未运行，浏览器报错是缓存或模板问题
• 若收到响应，说明有其他进程在监听5000端口

3. 检查端口占用情况 #

• Mac/Linux：执行lsof -i :5000，查看是否有进程占用端口
• Windows：执行netstat -ano | findstr :5000，找到PID后可在任务管理器中结束对应进程

4. 禁用浏览器缓存重试 #

在Network面板勾选「Disable cache」，刷新页面重新发起请求：

• 若报错变为net::ERR_CONNECTION_REFUSED，说明之前的报错是因为浏览器缓存了旧的预检响应

内容的提问来源于stack exchange，提问作者Nathan Wailes