Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 ?

like image 794
John Smith Avatar asked Oct 05 '22 14:10

John Smith


People also ask

How can we avoid preflight requests?

Another way to avoid Preflight requests is to use simple requests. Preflight requests are not mandatory for simple requests, and according to w3c CORS specification, we can label HTTP requests as simple requests if they meet the following conditions. Request method should be GET , POST , or HEAD .

How do you hide the XHR requests from the Network tab in the browser?

Unfortunately for you, there's no way to hide network requests from Chrome Network Log. Even if you could, it'd be still possible to use network analyzer tools such as Fiddler and Wireshark to log all the traffic between your computer and the Internet.

What is preflight request in Network tab?

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers. It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method , Access-Control-Request-Headers , and the Origin header.


1 Answers

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.

like image 137
Rick Hanlon II Avatar answered Nov 10 '22 09:11

Rick Hanlon II