diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
index fa7834b8fec07c..9f18b6391face0 100644
--- a/packages/vite/src/node/server/middlewares/static.ts
+++ b/packages/vite/src/node/server/middlewares/static.ts
@@ -80,7 +80,7 @@ export function serveStaticMiddleware(
       return next()
     }
 
-    const url = decodeURI(req.url!)
+    const url = decodeURIComponent(req.url!)
 
     // apply aliases to static requests as well
     let redirected: string | undefined
diff --git a/playground/fs-serve/__tests__/fs-serve.spec.ts b/playground/fs-serve/__tests__/fs-serve.spec.ts
index 25c274be05ca2e..2111cac80cc4e7 100644
--- a/playground/fs-serve/__tests__/fs-serve.spec.ts
+++ b/playground/fs-serve/__tests__/fs-serve.spec.ts
@@ -35,6 +35,13 @@ describe.runIf(isServe)('main', () => {
     expect(await page.textContent('.unsafe-fetch-status')).toBe('403')
   })
 
+  test('unsafe fetch with special characters (#8498)', async () => {
+    expect(await page.textContent('.unsafe-fetch-8498')).toMatch(
+      '403 Restricted'
+    )
+    expect(await page.textContent('.unsafe-fetch-8498-status')).toBe('403')
+  })
+
   test('safe fs fetch', async () => {
     expect(await page.textContent('.safe-fs-fetch')).toBe(stringified)
     expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
diff --git a/playground/fs-serve/root/src/index.html b/playground/fs-serve/root/src/index.html
index a0240bf7c89bba..6939e0f4b09ed9 100644
--- a/playground/fs-serve/root/src/index.html
+++ b/playground/fs-serve/root/src/index.html
@@ -17,6 +17,8 @@ <h2>Safe Fetch Subdirectory</h2>
 <h2>Unsafe Fetch</h2>
 <pre class="unsafe-fetch-status"></pre>
 <pre class="unsafe-fetch"></pre>
+<pre class="unsafe-fetch-8498-status"></pre>
+<pre class="unsafe-fetch-8498"></pre>
 
 <h2>Safe /@fs/ Fetch</h2>
 <pre class="safe-fs-fetch-status"></pre>
@@ -85,6 +87,19 @@ <h2>Denied</h2>
       console.error(e)
     })
 
+  // outside of allowed dir with special characters #8498
+  fetch('/src/%2e%2e%2funsafe%2etxt')
+    .then((r) => {
+      text('.unsafe-fetch-8498-status', r.status)
+      return r.text()
+    })
+    .then((data) => {
+      text('.unsafe-fetch-8498', data)
+    })
+    .catch((e) => {
+      console.error(e)
+    })
+
   // imported before, should be treated as safe
   fetch('/@fs/' + ROOT + '/safe.json')
     .then((r) => {