134

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?

Ubeogesh
  • 1,633
  • 2
  • 15
  • 22

4 Answers4

163

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

Giulio Caccin
  • 2,962
  • 6
  • 36
  • 57
jms
  • 1,670
  • 1
  • 11
  • 3
  • 5
    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? – Ubeogesh Aug 27 '19 at 11:35
  • I would imagine that the handling of cors got moved into the engine - a lower level than devtools has access to. But you can disable that optimization. – George Mauer Jan 24 '20 at 05:34
  • 48
    This behavior will turn newcomer devs life so much harder. This is basically hiding the answer to errors. – Claudio Holanda Mar 30 '20 at 14:41
  • Chrome 79+ no longer shows preflight CORS requests. You can use for example Firefox to see it. – mkupiniak May 05 '20 at 16:01
  • 7
    Good news from the Chrome implementor who worked on the related code: See the answer at https://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”* – sideshowbarker Jun 26 '20 at 10:01
  • @Ubeogesh search for 'cors' only and you will find the option easily. – Renascent Jun 01 '21 at 06:39
  • 2
    As @GZH suggest in the answer below, you can use the "Other" tab to see CORS pre-flight OPTIONS requests. – Jasper Kuperus Nov 29 '21 at 12:54
70

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 :(

GZH
  • 878
  • 6
  • 7
  • 18
    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. – KFunk May 12 '21 at 17:53
  • to add on top of this, the preflights seems like being cached. Here we go incognito... – Jakob Lindskog Jun 24 '21 at 11:36
  • 2
    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. – Philip Stratford Aug 31 '21 at 09:09
29

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.

enter image description here

https://getfirefox.com

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
16

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,

Takashi Toyoshima
  • 318
  • 2
  • 2
  • 9
    I'm running latest chrome on macOS and still don't see the OPTIONS in the network inspector. Help? – Miguel Ribeiro Jun 30 '20 at 15:30
  • 5
    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? – EK0 Jul 02 '20 at 11:55
  • 11
    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. – Ben Ketteridge Jul 03 '20 at 15:17
  • 2
    Can you try the following page? http://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,. – Takashi Toyoshima Jul 06 '20 at 16:20
  • ok, it looks my test case also does not work for the affected people. this may be a user-profile dependent issue and I'm investigating what conditions cause this. If you see this problem, could you visit following thread and share your issues? https://bugs.chromium.org/p/chromium/issues/detail?id=1102742 – Takashi Toyoshima Jul 07 '20 at 08:07
  • 30
    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? – Chris Tybur Jul 28 '20 at 20:35
  • On Toyoshima's site I see the console error `Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://alt-yuri.twintail.org' that is not equal to the supplied origin.` and I can see the OPTIONS request in the Network tab. However, on another site I get a different error: `No 'Access-Control-Allow-Origin' header is present on the requested resource.` and I CANNOT see the OPTIONS request. (Chrome 85.0.4183.102 OSX) – tgf Oct 15 '20 at 15:31
  • Would be nice to see the OPTIONS request in the network tab even if no header is present! – phuzi Oct 15 '20 at 15:57
  • 2
    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. https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request – Takashi Toyoshima Oct 21 '20 at 08:50
  • 2
    @ChrisTybur Yeah dude, that was it :) – Radu Diță Feb 11 '21 at 17:11