diff --git a/packages/gatsby/cache-dir/__tests__/loader.js b/packages/gatsby/cache-dir/__tests__/loader.js
index f98d951d309a0..a28971d4c07d2 100644
--- a/packages/gatsby/cache-dir/__tests__/loader.js
+++ b/packages/gatsby/cache-dir/__tests__/loader.js
@@ -293,6 +293,41 @@ describe(`Production loader`, () => {
       expect(await prodLoader.loadPageDataJson(`/mypage/`)).toBe(expectation)
       expect(xhrCount).toBe(1)
     })
+
+    it(`should include pathPrefix in HEAD request for missing HTML`, async () => {
+      global.__BASE_PATH__ = `/blog`
+      global.__PATH_PREFIX__ = `/blog`
+
+      const prodLoader = new ProdLoader(null, [])
+
+      const payload = { ...defaultPayload, path: `/404.html/` }
+      mock.use(
+        `GET`,
+        /\/blog\/page-data\/unknown-page\/page-data\.json/,
+        (req, res) => {
+          xhrCount++
+          return res.status(200).body(``)
+        }
+      )
+      mock.use(
+        `GET`,
+        /\/blog\/page-data\/404\.html\/page-data\.json/,
+        (req, res) => {
+          xhrCount++
+          res.header(`content-type`, `application/json`)
+          return res.status(200).body(JSON.stringify(payload))
+        }
+      )
+
+      let requestedPath
+      mock.use(`HEAD`, /.*/, (req, res) => {
+        requestedPath = req.url().path
+        return res.status(404)
+      })
+
+      await prodLoader.loadPageDataJson(`/unknown-page/`)
+      expect(requestedPath).toBe(`/blog/unknown-page/`)
+    })
   })
 
   describe(`loadPage`, () => {
diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js
index ec1a387065e67..851e078ed44eb 100644
--- a/packages/gatsby/cache-dir/loader.js
+++ b/packages/gatsby/cache-dir/loader.js
@@ -882,12 +882,15 @@ export class ProdLoader extends BaseLoader {
   loadPageDataJson(rawPath) {
     return super.loadPageDataJson(rawPath).then(data => {
       if (data.notFound) {
-        if (shouldAbortFetch(rawPath)) {
+        const headPath = rawPath.startsWith(__BASE_PATH__)
+          ? rawPath
+          : `${__BASE_PATH__}${rawPath}`
+        if (shouldAbortFetch(headPath)) {
           return data
         }
         // check if html file exist using HEAD request:
         // if it does we should navigate to it instead of showing 404
-        return doFetch(rawPath, `HEAD`).then(req => {
+        return doFetch(headPath, `HEAD`).then(req => {
           if (req.status === 200) {
             // page (.html file) actually exist (or we asked for 404 )
             // returning page resources status as errored to trigger
@@ -909,12 +912,15 @@ export class ProdLoader extends BaseLoader {
   loadPartialHydrationJson(rawPath) {
     return super.loadPartialHydrationJson(rawPath).then(data => {
       if (data.notFound) {
-        if (shouldAbortFetch(rawPath)) {
+        const headPath = rawPath.startsWith(__BASE_PATH__)
+          ? rawPath
+          : `${__BASE_PATH__}${rawPath}`
+        if (shouldAbortFetch(headPath)) {
           return data
         }
         // check if html file exist using HEAD request:
         // if it does we should navigate to it instead of showing 404
-        return doFetch(rawPath, `HEAD`).then(req => {
+        return doFetch(headPath, `HEAD`).then(req => {
           if (req.status === 200) {
             // page (.html file) actually exist (or we asked for 404 )
             // returning page resources status as errored to trigger