404 in DevTool Console for website on AWS Amplify/Vue

Question

I’m running into an issue with my AWS Amplify-hosted website, which is built using Vue 3 and Vite.

When I load the main page (e.g., https://url.de/) and navigate to sub-pages (e.g., https://url.de/contacts), everything works perfectly and no errors are displayed in the DevTools console.

However, when I load a sub-page directly in the browser (e.g., https://url.de/contacts), the page loads correctly, but I see the following error in the DevTools console:

contacts/:1 GET https://url.de/contacts/ 404 (Not Found)

From my research, I understand that this occurs because Vue is a single-page application (SPA) and the server attempts to fetch the requested page directly. In AWS Amplify, I already have the following redirect rule configured to handle SPA routing:

[
  {
    "source": "/<*>",
    "status": "404-200",
    "target": "/index.html"
  }
]

Why does the 404 error still appear in the console and how can I resolve it? The page works fine for end-users, but Google Ads is rejecting these URLs due to the 404 errors.

Does the one showing in console really have a trailing slash? Which the actual page URL doesn't have? — C3roe
– C3roe, Commented Aug 22 at 10:42
In the console is the trailing slash as showed above (it's copied out of console and just changed the part after https://) But could it be a problem that I do not have trailing slashes in the router-config? const routes = { {path: '/services', compoment: Services }, ... } — dennis_10-33
– dennis_10-33, Commented Aug 22 at 11:28
"But could it be a problem that I do not have trailing slashes in the router-config?" - rather not; whether you want trailing slashes on your routes/endpoints or not, should be your decision. I'm just rather wondering where from it could have gotten that URL with the trailing slash in the first place. Have you checked the source codes of what gets returned to the browser for any occurrences of /contacts/? Canonical URL, favicon, anything like that referring to that faulty URL somehow, perhaps? — C3roe
– C3roe, Commented Aug 22 at 12:02
so at my /src/router/index.js there is no trailing slash at any point. And I did not find some other places in the Vue-components with trailing slashes for any link in it. I've opened the Chrome DevTools on the Network-tab. Here I can see (after refreshing with F5) that the requested URL (without trailing slash, only url.de/contact) get a 301 Moved Permanently. Then contact/ was requested and get a 404. — dennis_10-33
– dennis_10-33, Commented Aug 22 at 12:33

dennis_10-33 · Accepted Answer · 2025-08-22 12:57:51Z

I think I found a solution.

Originally, AWS Amplify had this redirect rule automatically configured:

[
  {
    "source": "/<*>",
    "status": "404-200",
    "target": "/index.html"
  }
]

This means that if a route is not found (404), Amplify would serve index.html instead with a 200 status - as far as I understood. For normal browser users, everything worked fine because the SPA router handled the route. However, Google Ads and other crawlers still detected the initial 404, which caused issues with approving sitelinks.

After changing the rule to:

[
  {
    "source": "</^[^.]+$/>",
    "status": "200",
    "target": "/index.html"
  }
]

everything worked perfectly: no 404 errors are visible in the DevTools, and crawlers no longer see a 404.

I found this in the documentation of Amplify. There is no explanation about the default 404-200 value, but using "status": "200" as documented solved the issue completely.

Collectives™ on Stack Overflow

404 in DevTool Console for website on AWS Amplify/Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related