如何在 Chrome Devtools 中判断请求是否被浏览器阻止？

Question

我正在尝试修复本地开发时的 CORS 错误，但我在控制台中收到的错误消息没有意义，因为它说它正在从服务器接收预检响应，但我收到相同的错误即使我关闭服务器也会收到消息。因此，我只是想要一种可靠的方法来了解我在“网络”选项卡中看到的请求（包括预检请求）是否被浏览器阻止或者请求是否实际发送。

这是错误：

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

对我来说没有意义的部分是“响应飞行前请求”。如果我的服务器未运行，则不会对预检请求做出任何响应。

Answer 1

好吧，我明白了。

1. 不要只在“网络”选项卡中选择“Fetch/XHR”。您还需要选择“选项”选项卡（在 macOS 上使用 Ctrl+Click 或 Cmd+Click）来查看可能被拒绝的预检请求。
   • 
2. 在您的服务器关闭时，对 URL 执行

   OPTIONS

   curl

   ，以确保您的服务器没有在您不知情的情况下运行某些旧版本，例如

   curl -v -X OPTIONS http://localhost:5000/tokens

就我而言，我的预检在我不知情的情况下收到了 403 响应，而且我的服务器的另一个实例在我不知情的情况下正在运行。