Cloudflare Developers•5d ago

Global 404 not working on pages.

My understanding of 404's on cloudflare pages is that you set up your 404.shtml/html in the root of your project, and cloudflare designates that as a global route on the backend with no other work needed to serve 404's. So say I only have an index.html on example.com, and I go to example.com/fart, it will give me a 404 just fine. I have noticed an issue with multiple projects now, where the 404 at the root will not apply to directories on my pages projects, so if I go to example.com/fart/index.html (which doesnt exist) ill get a broken 404 that doesnt fully load with the assets/etc ive defined in the 404 at the root. Ive tried clearing cache, ive manually set up the 404 in that directory and it starts working after purging the cache, so is that the way I have to do things? I have to have a 404 set up per web page directory??

6 Replies

Chaika•5d ago

You didn't provide an example URL, but my best guess would be your 404.html at your root is using relative URLs (ex: load css at mycss.css ) which works at root, but when you go under a subdirectory it's then looking at /doesntexist/mycss.css, if you prefix them with / like /mycss.css, it pulls relative to root/top dir and not current otherwise you'd have to provide an example, it works fine to just have one at global/top level tho

TrueHeadsOP•5d ago

You are right. I had made assumptions that cloudflare served your 404 as more of a traditional routing scenario and wasnt so literal as to directory specifics. So if I use file URLs instead of /folder/cssfile.css, this will solve my problem?

Chaika•5d ago

Worth noting this is all browser stuff with relative directories. All Cloudflare does is serve the html for the 404, then the browser resolves relative URLs to load resources

So if I use file URLs instead of /folder/cssfile.css, this will solve my problem?

fully qualified ones would work, or prefix them with /, just don't have folder/cssfiles.css, MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references

MDN Web Docs

Resolving relative references to a URL - Web APIs | MDN

The URL() constructor or the URL.parse() static method of the URL API can be used to resolve a relative reference and a base URL to an absolute URL.

TrueHeadsOP•5d ago

Thanks, ill look into that. Heres how they are set up currently.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AREYOULOST?.initialized</title>
    <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: black;
        }
        .center-image {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <img src="assets/areyoulost.png" alt="Are You Lost?" class="center-image">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AREYOULOST?.initialized</title>
    <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: black;
        }
        .center-image {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <img src="assets/areyoulost.png" alt="Are You Lost?" class="center-image">
</body>
</html>

So ill make some changes.

Chaika•5d ago

change to, for example <link rel="icon" href="/assets/favicon.ico" type="image/x-icon"> img src="/assets/areyoulost.png" etc

A relative reference prefixed with /, such as /path, is relative to the site root. For example, given a URL of https://test.example.com/api/v1 the resolved URL for the root-relative URL /some/path is https://test.example.com/some/path, notably not https://test.example.com/api/v1/some/path.

TrueHeadsOP•5d ago

Thanks @Chaika ❤️

Gaming

Programming

Global 404 not working on pages.

Did you find this page helpful?