Is it possible to add a rule in Cloudflare to only show my domain name instead of the complete directory after the /? I only want to show dddocent.nl at all times. Can I apply a rule? If so, which one do I need?
What steps have you taken to resolve the issue?
None, because I don’t know if this is possible via a Cloudflare rule?
What are the steps to reproduce the issue?
Creating a rule to only show the domain name (dddocent.nl) at all times.
It is possible to implement this, but the approach depends on your use case. Could you clarify your goal a bit more?
For example:
Single-Page Application (SPA): If you’re using an SPA and want all visitors redirected back to the root (/) regardless of the path they visit, you can use Redirect Rules.
Hiding Folder Structure: If you’re trying to hide the directory structure at the origin by rewriting all paths to /, this could work but requires careful handling. For instance, if your use case requires returning different content for the same path (/), you’ll need to handle this logic:
2.1 Either through your application at the origin, and / or
2.2 Your custom JavaScript code in Snippets, and / or
2.3 By creating specific rules (i.e. URL rewrites) in Cloudflare with clear conditions (e.g., based on referer, headers, country, etc.) to determine how the request should be routed to your origin.
Right, so you want to rewrite both the domain name and the URL path. Does origin for dierenoppasdronten.nl accepts and serves requests correctly with the Host header dddocent.nl?
If yes, then first you need to create a CNAME record for dddocent.nl that targets dierenoppasdronten.nl, then add a Rewrite URL rule to append /dddocent/ in front of all URL paths for this hostname (note: you don’t want to rewrite all URLs to /dddocent/index.html because you have embedded images and other assets on that page that won’t load if you point everything to index.html):
Request URL: http*://dddocent.nl/*
Target path: *
Rewrite to: /dddocent${1}
If the origin for dierenoppasdronten.nl doesn’t accept requests with Host header dddocent.nl, you have two options:
Alternatively, if you’re on Pro or above, you can collapse all this logic into Snippets and route all matching requests according to your logic, similar to this example. Your Snippet will look more or less like this:
export default {
async fetch(request) {
// First, clone the original request to construct a new request
const newRequest = new Request(request);
// Add a header to identify a re-routed request at the new origin
newRequest.headers.set("X-Rerouted", "1");
// Clone the original URL
const url = new URL(request.url);
// Send request to a different origin / hostname
url.hostname = "dierenoppasdronten.nl";
// Append directory to the path
url.pathname = `/dddocent${url.pathname}`
// Serve response to the new request from the origin
return await fetch(url, newRequest);
}
};
Thanks for your reply. I tried to do everything you said (CNAME, rewrite URL rule), but unfortunately it’s not working. I see that the site is still loading like it was before. Could it be that it takes a while to apply al changes?
Hence, it’s very likely that you’ll need to follow the steps outlined in this part of my previous message:
Either via Origin Rules or Snippets or Workers (depending on your plan), you can rewrite Host header so that your origin would receive the request in such a way that allows it to return the response you expect.