Nuxt.js: URI malformed with dynamic route

[yaniv51]

Version

2.7.1

Reproduction link

https://codesandbox.io/s/examplehelloworld-quzpq

Steps to reproduce

Navigate with dynamic route to:
https://quzpq.sse.codesandbox.io/90%25

What is expected ?

Getting welcome page

What is actually happening?

Getting server error page with URI malformed error

_{This bug report is available on Nuxt community (#c9278)}

[yaniv51]

It is looks like it is Vue.js bug rather than Nuxt.js bug

[pimlie]

Closing this as this is an upstream issue in vue-router, see already linked issue

Better to leave this open until the issue has been fixed in vue-router

[ThomasR]

As far as I understand, this affects URLs containing a (properly escaped) % character (%25).

I'm experiencing a similar issue where the route on the server side always differs from the one on the client side (one is unescaped, the other one is escaped). Is that also caused by vue-router, or is this an actual Nuxt issue?

[pimlie]

@ThomasR not sure, could you show an example of what happens in your case?

[ThomasR]

What happens is that in

asyncData({ route: { path }}) {
    consola.log('path', path);
}

I get different log outputs server-side and client-side:

Server

path /foo bar

Browser

path /foo%20bar

However, I can't reproduce this bug when creating a new Nuxt app, so it must have something to do with my application config. (Can't publish that; it's not Free Software).

I'll try and come up with a minimal example, and file a new ticket.

Edit

turns out this was a problem with my app where sometimes URLs were manually escaped before passing them to nuxt-link. Not doing so solved my issue. Sorry for the confusion

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[tehyo]

Still the problem with Nuxt last version, url with % produces "url malformed error"

Example url : https://zqxk0lw813.sse.codesandbox.io/?p=test%3Q
Code : https://codesandbox.io/s/github/nuxt/codesandbox-nuxt

It's a big problem because sometimes Nuxt application stops

[eddybrando]

I still experience this problem in Nuxt v2.10.2, which uses vue-router ~3.0.7 as a dependency (in @nuxt/vue-app).

According to this issue https://github.com/vuejs/vue-router/issues/2708, the vue-router double DecodeURI that was apparently causing this issue, was already fixed in vue-router v3.0.4.

Is this then an issue unique to Nuxt?

[eddybrando]

I tried to trace back the error and I believe the crash happens in nuxt.js/packages/server/src/middleware/nuxt.js:14 on await renderRoute(url, context).

The url parameter here gets decoded two lines above in const url = decodeURI(req.url), which causes the %25 to go back to %, which results in a malformed URI.

Nevertheless, removing the decodeURI results on a similar 500 error with the "URL malformed" message but just moved to another part.

Since the function renderRoute is method from a vue-renderer instance, could the problem maybe live somewhere deep in vue-renderer?

[manniL]

@eddybrando Yes, it could be a vue-server-render issue then I guess. Can you reproduce it with "just" the vue server renderer?

(Example reproduction of another problem: https://github.com/vuejs/vue/issues/10733)

[eddybrando]

@eddybrando Yes, it could be a vue-server-render issue then I guess. Can you reproduce it with "just" the vue server renderer?

(Example reproduction of another problem: vuejs/vue#10733)

I can reproduce the error in both SSR and SPA rendering.

The SPA rendering just fails silently with a browser error log whilst the SSR returns the full error debug page.

I'm looking at the renderContext in vue-renderer to see if there is something there that could be fixed...

So far I found that renderContext.url in the renderRoute method has the decoded /path/foo/bar% version of the URL instead of the encoded one (/path/foo/bar%25), which can be found in all other URL references in said context.

But I'm still debugging...

[maunier]

@eddybrando Yes, it could be a vue-server-render issue then I guess. Can you reproduce it with "just" the vue server renderer?
(Example reproduction of another problem: vuejs/vue#10733)

I can reproduce the error in both SSR and SPA rendering.

The SPA rendering just fails silently with a browser error log whilst the SSR returns the full error debug page.

I'm looking at the renderContext in vue-renderer to see if there is something there that could be fixed...

So far I found that renderContext.url in the renderRoute method has the decoded /path/foo/bar% version of the URL instead of the encoded one (/path/foo/bar%25), which can be found in all other URL references in said context.

But I'm still debugging...

I encounter this problem too. Have you got a solution?

[eddybrando]

@eddybrando Yes, it could be a vue-server-render issue then I guess. Can you reproduce it with "just" the vue server renderer?
(Example reproduction of another problem: vuejs/vue#10733)

I can reproduce the error in both SSR and SPA rendering.
The SPA rendering just fails silently with a browser error log whilst the SSR returns the full error debug page.
I'm looking at the renderContext in vue-renderer to see if there is something there that could be fixed...
So far I found that renderContext.url in the renderRoute method has the decoded /path/foo/bar% version of the URL instead of the encoded one (/path/foo/bar%25), which can be found in all other URL references in said context.
But I'm still debugging...

I encounter this problem too. Have you got a solution?

Not really, I just avoided it by changing the way I constructed the URLs in my applications.

Do you encounter this still in the newest Nuxt version? Because I believe this is indeed a bug that should be addressed then.

If that's the case, we should probably open a new ticket and reference this there.

[maunier]

i do this to solve my problem: url.replace('%', '%25%25')

[mendicm]

This is my current solution if you use a custom router:

In {root}/router.js:

export function createRouter(ssrContext) {
  if (ssrContext) {
    ssrContext.url = ssrContext.url.replace(/%(?![0-9A-F]{2})/g, '%25')
  }
  ...
}

[claudiolcastro]

Heey, I'm using the version 2.13.3 of Nuxt.js and I'm still having this Issue. Anyone found the solution? Should this Issue be reopened? @eddybrando @maunier

I already try some aproaches by using serverMiddlware and doing some _unescapes_ ... But I really wat to know if there is an official solution..

My url: https://localhost:3000/my-route/my-name/100%25-vote/

I'm getting the URI malformed error..

by adding this serverMiddleware on /my-route I kinda solved the issue on the serer side...

export default function (req, res, next) {
  try {
    decodeURIComponent(req.originalUrl);
    req.url = encodeURI(req.url);

    next();
  } catch (e) {
    const url = encodeURI(unescape(req.originalUrl));

    res.writeHead(302,
      { Location: url }
    );
    res.end();
  }
}

but when gets to the client side I get the URI malformed on the browser console...

thanksss!

[maunier]

Heey, I'm using the version 2.13.3 of Nuxt.js and I'm still having this Issue. Anyone found the solution? Should this Issue be reopened? @eddybrando @maunier

I already try some aproaches by using serverMiddlware and doing some _unescapes_ ... But I really wat to know if there is an official solution..

My url: https://localhost:3000/my-route/my-name/100%25-vote/

I'm getting the URI malformed error..

by adding this serverMiddleware on /my-route I kinda solved the issue on the serer side...

export default function (req, res, next) {
  try {
    decodeURIComponent(req.originalUrl);
    req.url = encodeURI(req.url);

    next();
  } catch (e) {
    const url = encodeURI(unescape(req.originalUrl));

    res.writeHead(302,
      { Location: url }
    );
    res.end();
  }
}

but when gets to the client side I get the URI malformed on the browser console...

thanksss!

Maybe you can change your route to https://localhost:3000/my-route/my-name/100%2525-vote/

[claudiolcastro]

@maunier I'm trying something like that. I already saw that this is really a vue-router issue https://github.com/vuejs/vue-router/issues/2725