useFetcher CORS error on 302 redirect response when using authentication flow with OAUTH2 proxy server

[TheBadam]

I'm using React Router as a...

framework

Reproduction

Clone repo: https://github.com/TheBadam/ReactRouterBugs
Run docker compose up and with DEV tools open in i.e.: Edge click the "Click!" text. This should fire fetch through useFetcher and should fail. nginx proxy redirects any /__manifest request to https://login.microsoft.com which will in process fail with CORS error.
This is a simplified example of using oatuh2-proxy from: https://github.com/oauth2-proxy/oauth2-proxy when cookie expires/is removed. Currently there is no control of how useFetcher reacts for redirects and requires some nasty hacks - unless there is other solution?
We use useFetcher to load data in app.

System Info

System:
    OS: Linux 6.8 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (2) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 5.87 GB / 7.75 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.8.1 - ~/nvm/current/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.1.0 - ~/nvm/current/bin/npm
    pnpm: 8.9.2 - ~/nvm/current/bin/pnpm

Used Package Manager

npm

Expected Behavior

On authentication 302 redirect (certain redirect), navigate instead of fetch or at least expose fetch options to handle it on client side, i.e.: {redirect: "manual"}.

Actual Behavior

CORS fetch error.

[timdorr]

We make a request to /__manifest so we can be sure that path exists. This is because we lazy load the route configuration ("fog of war") and that is how we add more of it to the client.

This isn't really something we can fix ourselves, as that's a fundamental behavior. I would add handling for the /__manifest path to your nginx.conf so that it never gets redirected to the proxy and always goes directly to your Node server.

[TheBadam]

Hi, thanks for the reply!

I was thinking a bit about it, and I think I wouldn't like to allow any traffic (in this case) behind the authentication layer. This is important information that could be included in the docs -> shedding more light on how the requests work (sorry if I haven't seen it, I did search a lot but can't recall it). I would also include information of possible issues with auth proxies, or merged it in a hard requirement about resolving __manifest calls, etc.

Are there any quick setups that would work with React Router v7 while adding the auth layer, that would enable benefits of both solutions?