diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
index 9f18b6391face0..3b482068bd6138 100644
--- a/packages/vite/src/node/server/middlewares/static.ts
+++ b/packages/vite/src/node/server/middlewares/static.ts
@@ -109,7 +109,7 @@ export function serveStaticMiddleware(
     }
 
     if (redirected) {
-      req.url = redirected
+      req.url = encodeURIComponent(redirected)
     }
 
     serve(req, res, next)
@@ -144,7 +144,7 @@ export function serveRawFsMiddleware(
       url = url.slice(FS_PREFIX.length)
       if (isWindows) url = url.replace(/^[A-Z]:/i, '')
 
-      req.url = url
+      req.url = encodeURIComponent(url)
       serveFromRoot(req, res, next)
     } else {
       next()
diff --git a/playground/fs-serve/__tests__/fs-serve.spec.ts b/playground/fs-serve/__tests__/fs-serve.spec.ts
index 2111cac80cc4e7..d65ccdea7368cf 100644
--- a/playground/fs-serve/__tests__/fs-serve.spec.ts
+++ b/playground/fs-serve/__tests__/fs-serve.spec.ts
@@ -42,6 +42,11 @@ describe.runIf(isServe)('main', () => {
     expect(await page.textContent('.unsafe-fetch-8498-status')).toBe('403')
   })
 
+  test('unsafe fetch with special characters 2 (#8498)', async () => {
+    expect(await page.textContent('.unsafe-fetch-8498-2')).toMatch('')
+    expect(await page.textContent('.unsafe-fetch-8498-2-status')).toBe('404')
+  })
+
   test('safe fs fetch', async () => {
     expect(await page.textContent('.safe-fs-fetch')).toBe(stringified)
     expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
@@ -64,6 +69,11 @@ describe.runIf(isServe)('main', () => {
     expect(await page.textContent('.unsafe-fs-fetch-8498-status')).toBe('403')
   })
 
+  test('unsafe fs fetch with special characters 2 (#8498)', async () => {
+    expect(await page.textContent('.unsafe-fs-fetch-8498-2')).toBe('')
+    expect(await page.textContent('.unsafe-fs-fetch-8498-2-status')).toBe('404')
+  })
+
   test('nested entry', async () => {
     expect(await page.textContent('.nested-entry')).toBe('foobar')
   })
diff --git a/playground/fs-serve/root/src/index.html b/playground/fs-serve/root/src/index.html
index 6939e0f4b09ed9..68eed69810c7d4 100644
--- a/playground/fs-serve/root/src/index.html
+++ b/playground/fs-serve/root/src/index.html
@@ -19,6 +19,8 @@ <h2>Unsafe Fetch</h2>
 <pre class="unsafe-fetch"></pre>
 <pre class="unsafe-fetch-8498-status"></pre>
 <pre class="unsafe-fetch-8498"></pre>
+<pre class="unsafe-fetch-8498-2-status"></pre>
+<pre class="unsafe-fetch-8498-2"></pre>
 
 <h2>Safe /@fs/ Fetch</h2>
 <pre class="safe-fs-fetch-status"></pre>
@@ -31,6 +33,8 @@ <h2>Unsafe /@fs/ Fetch</h2>
 <pre class="unsafe-fs-fetch"></pre>
 <pre class="unsafe-fs-fetch-8498-status"></pre>
 <pre class="unsafe-fs-fetch-8498"></pre>
+<pre class="unsafe-fs-fetch-8498-2-status"></pre>
+<pre class="unsafe-fs-fetch-8498-2"></pre>
 
 <h2>Nested Entry</h2>
 <pre class="nested-entry"></pre>
@@ -100,6 +104,19 @@ <h2>Denied</h2>
       console.error(e)
     })
 
+  // outside of allowed dir with special characters 2 #8498
+  fetch('/src/%252e%252e%252funsafe%252etxt')
+    .then((r) => {
+      text('.unsafe-fetch-8498-2-status', r.status)
+      return r.text()
+    })
+    .then((data) => {
+      text('.unsafe-fetch-8498-2', data)
+    })
+    .catch((e) => {
+      console.error(e)
+    })
+
   // imported before, should be treated as safe
   fetch('/@fs/' + ROOT + '/safe.json')
     .then((r) => {
@@ -133,6 +150,18 @@ <h2>Denied</h2>
       text('.unsafe-fs-fetch-8498', JSON.stringify(data))
     })
 
+  // outside root with special characters 2 #8498
+  fetch(
+    '/@fs/' + ROOT + '/root/src/%252e%252e%252f%252e%252e%252funsafe%252ejson'
+  )
+    .then((r) => {
+      text('.unsafe-fs-fetch-8498-2-status', r.status)
+      return r.json()
+    })
+    .then((data) => {
+      text('.unsafe-fs-fetch-8498-2', JSON.stringify(data))
+    })
+
   // not imported before, inside root with special characters, treated as safe
   fetch(
     '/@fs/' +