Catch-all route catches unwanted files #16110
Replies: 4 comments 6 replies
|
You could check the |
|
Thanks for you quick reply @manniL. I already tried this approach, but without succes. The issue being that if I throw a 404 it will be for the whole page. Where the fault is actually only that an ad is injecting some random style with a "background: url('assets/dummy');" so the page should render, just with their silly image failing :) That's why I would rather ignore it completely from the slug route somehow. (The proper fix would of course be that the ad does not request non-existing ressources, but that is out of my hands) |
|
Ahh, got it! You could instead try to serve a placeholder instead (see e.g. nitrojs/nitro#94 / https://github.com/unjs/serve-placeholder). This might not make the ad request fail? If that wouldn't work the question is - what happens if Nuxt would "ignore" the route instead? There would still be a 404, right? |
|
serve-placeholder looks promising. Not really sure how to activate it though, somehow include it in my own servermiddleware or? If nuxt "ignores" the route there will still be a 404 in the browser console (and network). This is how it ends up in our old nuxt2 version of the site :) |
|
Hi, I ran into the same issue. Is this a bug or wanted behaviour? I find it a bit weird that .png files are treated as pages. In Nuxt 2 if you request image it will always give back image (broken one with 404 error in case the assets does not exists). And in case of Nuxt 3 it will treat it as a page and serve error page. |
|
I have the same issue, have you found a solution? |
|
Ended up adding this to the slug file Not the most clean solution I guess, but seems to work |
|
I used the following snippet: This "rejects" each route which ends with Nuxt first tries to serve existing files (e. g. stored in |
|
i have the same problem! I have a [...slug] route that validated the url vs. our e-commerce backend if the category or product page exists. In the vercel logs after a deployment i can see a lot of requests for missing assets under /_nuxt/* hitting the page and creating api requests against our e-commerce backend. I have middleware for this catch all route. Would it be the right approach to have an early exit for this like so: maybe even: Any help appreciated for a best practice approach! |
|
For a catch-all page I would treat this as an early-routing guard, not as a backend lookup failure. A For your Vercel const route = useRoute()
const path = route.path
if (
path.startsWith('/_nuxt/') ||
path.startsWith('/__nuxt') ||
/\/[^/]+\.[a-z0-9]{1,12}$/i.test(path)
) {
throw createError({
statusCode: 404,
statusMessage: 'Not Found',
})
}Then only call the e-commerce backend after that guard passes. I would keep this check as close as possible to the catch-all route or the server/API function that performs the lookup. If you put it in global middleware, make sure it does not accidentally block legitimate routes that happen to contain dots, for example usernames, slugs, or docs pages. The file-extension regex is a good default for asset-like paths, but the safest allow/deny rules depend on your URL scheme. For static files you own, prefer placing them under |
Uh oh!
There was an error while loading. Please reload this page.
Building a site that uses the [...slug].vue catch all route.
We use the parameters to call an api to get some data back. This part works great.
How ever we have some 3rd party that from time ends up making requests to non-existing assets eg: 'assets/dummy.png'
The [...slug] route will catch this and end up in unhandled errors.
Is there some way to exclude all urls containing a file ending from the [...slug] route. Or maybe some even better way of handling this scenario?
All reactions