fix(gatsby): fetching 404 page with path prefix

e2e-tests/path-prefix/cypress/integration/navigate.js

@@ -73,4 +73,14 @@ describe(`navigate`, () => {
 
     cy.get(`h1`).contains(`NOT FOUND`)
   })
+
+  it(`can load 404 page and react client side rendering success`, () => {
+    cy.visit(`/not-existing-page`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.getTestElement(`page-404-click`).click()
+
+    cy.get(`h2`).contains(`gatsby`)
+  })
 })

e2e-tests/path-prefix/src/pages/404.js

@@ -1,11 +1,17 @@
 import * as React from "react"
 import Layout from "../components/layout"
 
-const NotFoundPage = () => (
-  <Layout>
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
-)
+const NotFoundPage = () => {
+  const [company, setCompany ] = React.useState("")
+
+  return (
+    <Layout>
+      <h1>NOT FOUND</h1>
+      <h2>{company}</h2>
+      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <button data-testid="page-404-click" onClick={() => { setCompany("gatsby") }}>Click</button>
+    </Layout>
+  )
+}
 
 export default NotFoundPage

packages/gatsby/cache-dir/loader.js

@@ -603,7 +603,7 @@ export class ProdLoader extends BaseLoader {
       if (data.notFound) {
         // 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(`${__PATH_PREFIX__}${rawPath}`, `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