URI malformed with dynamic route #5827

yaniv51 · 2019-05-29T06:32:05Z

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 · 2019-05-29T07:02:22Z

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

pimlie · 2019-06-05T16:15:27Z

~~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 · 2019-06-07T10:02:43Z

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 · 2019-06-07T10:06:47Z

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

ThomasR · 2019-06-07T12:00:15Z

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 · 2019-07-02T07:53:18Z

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:

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

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

tehyo · 2019-10-30T14:59:32Z

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 · 2019-11-11T12:38:02Z

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 vuejs/vue-router#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 · 2019-11-11T13:29:16Z

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 · 2019-11-11T13:47:41Z

@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)

eddybrando · 2019-11-11T14:07:26Z

@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 · 2020-02-26T10:46:38Z

@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 · 2020-04-16T20:40:40Z

@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 · 2020-04-17T01:43:17Z

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

mendicm · 2020-05-21T15:55:08Z

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 · 2020-07-27T18:24:45Z

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 · 2020-07-28T02:25:12Z

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 · 2020-07-28T16:06:25Z

@maunier I'm trying something like that. I already saw that this is really a vue-router issue vuejs/vue-router#2725

xytaizi1230 · 2021-01-13T06:47:57Z

我遇到了相同的问题，当url中包含%时，将出现URI malformed
在.nuxt/router.js中存在decodeObj方法对字符进行解码，但是没有进行异常处理，我尝试在这段代码上增加trycatch，但是依旧回在其他地方出现此问题

bestark · 2021-12-23T19:38:56Z

I ran into that problem today. Nuxt Version was 2.14.11. Solving the problem with updating to 2.14.12.

ghost added the cmty:bug-report label May 29, 2019

yaniv51 mentioned this issue May 29, 2019

URI malformed with dynamic route vuejs/vue-router#2786

Closed

pimlie closed this as completed Jun 5, 2019

pimlie reopened this Jun 5, 2019

pimlie added the waiting for dependency label Jun 5, 2019

stale bot added the stale label Jul 2, 2019

stale bot closed this as completed Jul 9, 2019

manniL added pending and removed stale labels Jul 30, 2020

danielroe added the 2.x label Jan 18, 2023

danielroe added the pending triage label Jan 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

URI malformed with dynamic route #5827

URI malformed with dynamic route #5827

yaniv51 commented May 29, 2019

yaniv51 commented May 29, 2019

pimlie commented Jun 5, 2019 •

edited

ThomasR commented Jun 7, 2019 •

edited

pimlie commented Jun 7, 2019

ThomasR commented Jun 7, 2019 •

edited

stale bot commented Jul 2, 2019

tehyo commented Oct 30, 2019

eddybrando commented Nov 11, 2019 •

edited

eddybrando commented Nov 11, 2019

manniL commented Nov 11, 2019 •

edited

eddybrando commented Nov 11, 2019

maunier commented Feb 26, 2020

eddybrando commented Apr 16, 2020 •

edited

maunier commented Apr 17, 2020

mendicm commented May 21, 2020

claudiolcastro commented Jul 27, 2020 •

edited

maunier commented Jul 28, 2020

claudiolcastro commented Jul 28, 2020 •

edited

xytaizi1230 commented Jan 13, 2021

bestark commented Dec 23, 2021

URI malformed with dynamic route #5827

URI malformed with dynamic route #5827

Comments

yaniv51 commented May 29, 2019

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

yaniv51 commented May 29, 2019

pimlie commented Jun 5, 2019 • edited

ThomasR commented Jun 7, 2019 • edited

pimlie commented Jun 7, 2019

ThomasR commented Jun 7, 2019 • edited

Edit

stale bot commented Jul 2, 2019

tehyo commented Oct 30, 2019

eddybrando commented Nov 11, 2019 • edited

eddybrando commented Nov 11, 2019

manniL commented Nov 11, 2019 • edited

eddybrando commented Nov 11, 2019

maunier commented Feb 26, 2020

eddybrando commented Apr 16, 2020 • edited

maunier commented Apr 17, 2020

mendicm commented May 21, 2020

claudiolcastro commented Jul 27, 2020 • edited

maunier commented Jul 28, 2020

claudiolcastro commented Jul 28, 2020 • edited

xytaizi1230 commented Jan 13, 2021

bestark commented Dec 23, 2021

pimlie commented Jun 5, 2019 •

edited

ThomasR commented Jun 7, 2019 •

edited

ThomasR commented Jun 7, 2019 •

edited

eddybrando commented Nov 11, 2019 •

edited

manniL commented Nov 11, 2019 •

edited

eddybrando commented Apr 16, 2020 •

edited

claudiolcastro commented Jul 27, 2020 •

edited

claudiolcastro commented Jul 28, 2020 •

edited