Search code examples
.net.net-corerequestpreflight

Why preflight requests fail only in Chrome and then they work after few tries?

I have a strange problem with preflight requests.

This is how it looks in the Chrome (and other chromium based browsers) after doing something in our application: enter image description here

Many preflight requests are marked red as failed (net::ERR_FAILED).

One of such failed preflights: enter image description here

But in the end, there is a preflight request for each request, that succeeds with 204 and the application works correctly. So it looks like the browser tries it few times and ultimately it's ok, but many items in the log are red...

In the Firefox preflight requests are not even visible and it looks like everything is fine: enter image description here

In the API, in Program.cs, we have such a code, which should make it always work, with AllowAnyMethod(), which should accept any OPTIONS requests:

var allowedOrigins = app.Configuration.GetSection("appSettings") != null
            ? app.Configuration.GetSection("appSettings").GetSection("AllowedCorsOrigins").GetChildren().Select(x => x.Value).ToArray()
            : Array.Empty<string>();
        Trace.WriteLine("allowed origins:" + string.Join(',', allowedOrigins));
        app.UseCors(x => x
            .WithOrigins(allowedOrigins)
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()
            .WithExposedHeaders("Content-Disposition"));

I also tried this solution with the use of middleware: https://stackoverflow.com/a/42199758/3153226 But it works the same.

What can be the reason that Chrome is making so many failed preflight requests? Is it normal? Is it a Chrome bug, network error or API error?

Thank you for your answers. I can add more information, just tell me what you need to know.

Btw I don't have any CORS errors in the console log.

Solution

  • Since the server name in your post was redacted, I can't tell, but if your issue is the same as mine, it might be because of Chrome's new mechanism for dealing with CSRF attacks. Since v104, Chrome is warning users of accesses to resources on private networks from those on public networks. In version 104, the actual request will still go through, but starting in v107, they may start enforcing the success of the preflight for the actual request to succeed.

    To see if this is the case for you, open up the developer tools in chrome, load the page in question, then click on the Issues tab. You should see an issue titled Ensure private network requests are only made to resources that allow them

    There are two solutions available to you:

    • Handle preflight requests on the server side
    • Disable PNA checks with enterprise policies

    I think the latter requires you to have control over your users' browser policies. If this is an internal app or development instance, that might be ok.

    For the former, your server needs to include this response: Access-Control-Allow-Private-Network: true

    How to do this depends on your framework. I think if this is a development instance, you can safely ignore this warning until Chrome v107+, and after that you'll need to make adjustments to either your development browser instance or your server when it is running in dev mode.

    More info here: https://developer.chrome.com/blog/private-network-access-preflight/#what-is-private-network-access-pna