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.
>Solution :
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.