0

I would like to be sure why the browser treats long URLs differently depending on how they were executed. What exactly do I mean:

In my app I have a link to some view which could has a very long URL. That link can be much longer than 2000 characters and I know that it can not work in different browsers (source). But when we go to that link, by clicking in the app, everything works and browser does not return any error. However, when we then copy that link and we paste in new tab, then browser returns 431 Request header fields too large error. I wish to know why it happens. Maybe it's related to framework nextjs which I use? I tested that on Chrome and Firefox.

4ntke
  • 15
  • 3
  • Is you application a SPA application? It could be that by clicking inside the app, no actual `HTTP` request is performed, and NextJs just replaces the browser's url field with the expected URL. When you perform a page refresh, there is an actual `HTTP` request, hence the error. – Jeroen Verfaillie Sep 08 '22 at 07:23
  • It makes sense. And yes, my application is SPA application. Maybe I should make some kind of proxy for links to prevent passing them to next.js routing when they are too long to prevent unexpected result in actual `HTTP` requests. Thank you! – 4ntke Sep 08 '22 at 07:37

1 Answers1

1

You are probably doing a client-side routing when clicking on links in Next.js. This uses the history API and it has no limit to the URL's length. The URL doesn't really go outside the browser.

When you pasting a URL into the address bar, it sends a GET request and the length is being rejected by your website server with 431 error.

If you'll click on a link with a long URL and then do a page full refresh using F5 for example, you'll see the error.

Arik
  • 5,266
  • 1
  • 27
  • 26