How to filter (hide) Pre-flight requests on my Dev Tools Network

cors google-chrome-devtools
John Smith picture John Smith · Feb 23, 2016 · Viewed 19.8k times · Source

Normally both calls are shown, the pre-flight and the actual request. This is sometimes annoying. Is there a way to hide the pre-flights requests ?

Or is there a plugin to filter certain requests based on headers ?

Answer

Rick Hanlon II picture Rick Hanlon II · Aug 31, 2016

The quickest way to do this is to filter on -method:OPTIONS.

enter image description here

Explanation: all pre-flight requests are via the HTTP OPTIONS method (opposed to POST or GET). This filter says "not method OPTIONS".

Note the leading hyphen because if you forget it, you'll only show pre-flight requests.

Related questions

Chrome not showing OPTIONS requests in Network tab

My web client application is setting HTTP POST requests via fetch API. I see that OPTIONS preflight requests are sent via debugging proxy (Charles Proxy), but they are not displayed in Google Chrome Developer Tools\Network tab. I don't have …

Read More
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Mod note: This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. Please stop posting: CORS configurations for every …

Read More
How does Access-Control-Allow-Origin header work?

Apparently, I have completely misunderstood its semantics. I thought of something like this: A client downloads javascript code MyCode.js from http://siteA - the origin. The response header of MyCode.js contains Access-Control-Allow-Origin: http://siteB, which I thought meant …

Read More