Chrome not showing OPTIONS requests in Network tab

Question

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 any filters setup on the network tab. I remember OPTIONS requests being visible there, but not anymore. How do I bring them back?

Solution 1

You'll need to go to: chrome://flags/#out-of-blink-cors, disable the flag, and restart Chrome.

This is an expected behavior change according to:
https://bugs.chromium.org/p/chromium/issues/detail?id=995740#c1

I originally came across this via:
https://support.google.com/chrome/thread/11089651?hl=en

Solution 2

As of 2021 in CHROME the OPTIONS request is visible in the NETWORK tab filter OTHER requests

To see it together with XHR just CTRL+click and pick the request filters you want to see.

UPDATE (April 17) Chrome Version 90.0.4430.72 has made the options requests hidden again :(

Solution 3

Chrome 81 does not seem to display anything even after changing the option and restarting on my computer.

As an alternative solution, I started to use Firefox and its Network tab for development.

https://getfirefox.com

Solution 4

I'm Takashi from Chromium Project, and drove the Out-Of-Blink/Render CORS project.

The project intended to introduce a process isolated CORS implementation for better security and privacy, and many of new network related features rely on this new implementation. Unfortunately we temporarily disabled preflight support in DevTools as it turned out continuing to support it weakens security and privacy. Sorry for inconvenience during this period.

Good news is now Chrome 83 implements the CORS preflight DevTools support again in a security preserved way. So you can monitor the CORS preflight requests as you could do before the Out-Of-Blink/Renderer CORS.

Best,

View more solutions

Comments

[Ubeogesh]

This worked. But I couldn't find in the linked pages what this "out-of-blink-cors" setting does. Blink is chrome engine name - so what component does cors instead of it? And what has effectively changed for normal websites that are not chrome extensions?

[Claudio Holanda]

This behavior will turn newcomer devs life so much harder. This is basically hiding the answer to errors.

[Gustavo Straube]

I'm using Chrome 81 and changing the flag as suggested by jms worked.

[Mikko Ohtamaa]

@GustavoStraube Hmmm. Are you on which operating system?

[Gustavo Straube]

MacOS Mojave (10.14.6)

[sideshowbarker]

Good news from the Chrome implementor who worked on the related code: See the answer at stackoverflow.com/a/62590759/441757 “Chrome 83 implements the CORS preflight DevTools support again in a security preserved way. So you can monitor the CORS preflight requests as you could do before the Out-Of-Blink/Renderer CORS”

[Miguel Ribeiro]

I'm running latest chrome on macOS and still don't see the OPTIONS in the network inspector. Help?

[EK0]

Chrome 83.0.4103.116 (Mac OS) - still no pre-flight information visible in the network panel. Is there some flag that needs to be turned on?

[Ben Ketteridge]

Chrome 83.0.4103.116 (Official Build) (64-bit) on MacOs still not showing pre-flight for me too. And the experimental out-of-blink-cors option is no longer available.

[Takashi Toyoshima]

Can you try the following page? yuri.twintail.org/chrome/cors/preflight.html 1) Open DevTools 2) Click the "make cors fetch" button 3) You will see two requests for 918322_21.cgi, one is failing actual request, and the other is 200 for the preflight. Note: if the request hits the CORS preflight cache, we don't show anything as Chrome does not send the preflight. "Disable cache" option in the DevTools is expected to mitigate this problem as preflight cache is also disabled with this option,.

[koosa]

I was seeing this behaviour when testing a site behind basic http auth. Even if you're logged in on another tab the preflight request will always fail (v84)

[Chris Tybur]

For me running Chrome 84/Win10, OPTIONS requests show up in the Network tab if you select the 'All' filter, but don't if you select the 'XHR' filter. Which is annoying because then I have to wade through dozens of other requests I don't care about. Any idea why you can't show them in both places?

[Takashi Toyoshima]

CORS preflight (OPTIONS request) is not always sent even if the request is cross-origin one. See MDN document as a readable reference. Preflight is omitted for simple requests. As long as the preflight is sent, current Chrome will show the request in DevTools network tab. developer.mozilla.org/en-US/docs/Glossary/Preflight_request

[Radu Diță]

@ChrisTybur Yeah dude, that was it :)

[KFunk]

What is going on with chrome? This is the 4th toggle of showing these requests in the last ~10 versions. I can't keep up.

[Philip Stratford]

On the advice of others on this page I've just switched to Firefox for this and with no extra config I can quite easily see the OPTIONS request. Taking on board the answer from @Takashi Toyoshima, this makes me wonder whether Firefox is less secure or whether the Chromium team are just unable to work out how to do what Mozilla have done.