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. https://zackbox.netlify.app/
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.
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?
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.
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.
