How do I modify headers depending on the site's URL? React Router

I have a site that utilizes headers that enable cross origin isolation, which allows me to use certain web features such as ffmpeg. This post helped me enable these features:

However, by enabling these headers ( Cross-Origin-Opener-Policy = “same-origin” and Cross-Origin-Embedder-Policy = “require-corp” ) other aspects of my website breaks, mostly firebase features. Is it possible to have different headers depending on the URL, or perhaps by different route in React Router? I simply need to have the cross origin isolation headers to use ffmpeg in 1 page, but not the other pages.

It depends on how you’re connecting to Firebase. If you followed the solution posted by me, it should not have any effect on your Firebase stuff unless you’re connecting to Firebase from Netlify somehow. Mind sharing a URL we can check to understand the problem better?

My question was not about firebase. I only stated it doesn’t work when certain headers are present. I asked if it’s possible to have different headers for different URLs, or in my case if it’s possible to have different headers for different routes in React router.

Here is the URL for the site if it helps. Typing in a 4-character code and your name should make a simple request to firebase, but instead throws an error. Again, this works as intended if I disable Cross Origin Isolation.

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 (OK)

I don’t see any errors @MooKorea

Here is what I see in Firefox

Here is what I see in Opera (nothing logged in console)

Clearing the site data (not hard refresh) for the site will make it work again temporarily, it likely only works for you since it’s your first time visiting. But after 30 minutes or so (or up to a day) you will see the error. This problem occurs on both my phone, desktop, different browsers including firefox, and several other people’s devices as well. From my experience, visiting the site on your phone generally has a lower waiting time before the error occurs.

Once again, my question is if it’s possible to have different headers for different URLs, or in my case if it’s possible to have different headers for different routes in React router.

Routing, as you have mentioned, is handled by React Router. Netlify isn’t serving the separate pages, React is. Seems your issue is with React Router not Netlify.

So if I wanted to have different headers for different pages, would I need to use a different framework like next.js?

Using Next.js will not necessarily solve this issue. But check out the documentation.

In either case this is not an issue with Netlify.

In the next.js docs, middleware is capable of setting headers for certain Routes. Does Netlify not support this feature?

I advise you to look at the relevant Netlify documentation regarding what features are supported.

You mentioned that using next.js will not solve my issue (using different headers for different pages or urls), but next.js is capable of using middleware to set headers for certain routes. In the documentation you linked, I do not see anywhere that explicitly mentions that this feature is not supported by Netlify.

If next.js does not solve my issue as you said, could you please elaborate on what I should specifically do to actually solve the problem in my original post?

Did you read this @MooKorea?

Did you implement the solution in the post you linked to?

I’m afraid you don’t understand my question. I mentioned in my original post that the post I linked to already solved a problem I had prior to my current one. My site already utilizes SharedArrayBuffer due to the special headers I put in the netlify.toml file, as mentioned in the linked post. Once again, and I want to make this very clear, that my original question is not about firebase. My question is also not about the SharedArrayBuffer mentioned in the linked post (as I already solved that problem). Rather, I am asking for a solution that would allow me to use different headers for different pages. After some research, it is not possible with React Router, since only the index.html page is served and React Router handles the routing, meaning the headers must be the same across the entire site. Because of this, I am looking for other solutions.

Then I cannot help you.

Hi, @MooKorea. You can set a unique header for specific paths using header rules at Netlify:

However, they are not dynamic. You would need to know in advance what paths would be requests and what header values you want to server. It does still work with single page applications that just have one index.html file as well as long as an HTTP request is being made.