Cloudflare Developers•14mo ago

URL Rewrite to remove file extension

Hi, Can someone help me make a URL rewrite expression that removes file extension? Example: URI path in: /aaa/bbb.png URI out: /aaa/bbb (which shows bbb.html) The tricky thing is I don't have the premium stuff like regex

9 Replies

Cyb3r-Jak3•14mo ago

That is something typically done at the origin server. You might cause issues if trying to modify it via cloudflare

Catt0s•14mo ago

I am using cloudflare pages, and this is a rule that applies to only some traffic

Cyb3r-Jak3•14mo ago

Pages typically hides the extensions but it also depends on the framework you are using to build your site

Catt0s•14mo ago

well, i mean, i want the file (like an image) to redirect to the page it is hosted on

Cyb3r-Jak3•14mo ago

? That's not how HTML works. You can hyperlink the image to a page but you can't serve content and have it redirect

crossbeau•14mo ago

maybe worth using a worker on your path and scripting some logic to modify the request based on route using worker you could leverage regex and path match with regex how you are asking

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Parse the URL from the request
  let url = new URL(request.url)

  // Check if the path ends with .png
  if (url.pathname.endsWith('.png')) {
    // Remove the .png extension and append .html
    url.pathname = url.pathname.slice(0, -4) + '.html'

    // Create a new request with the updated URL
    request = new Request(url, request)

    // Fetch the request from the origin
    const response = await fetch(request)

    // Return the response
    return response
  }

  // If the URL doesn't end with .png, simply fetch the original request
  return fetch(request)
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Parse the URL from the request
  let url = new URL(request.url)

  // Check if the path ends with .png
  if (url.pathname.endsWith('.png')) {
    // Remove the .png extension and append .html
    url.pathname = url.pathname.slice(0, -4) + '.html'

    // Create a new request with the updated URL
    request = new Request(url, request)

    // Fetch the request from the origin
    const response = await fetch(request)

    // Return the response
    return response
  }

  // If the URL doesn't end with .png, simply fetch the original request
  return fetch(request)
}

Catt0s•14mo ago

hmm maybe isnt that exactly what tenor does with gifs on discord though?

Karew•14mo ago

I believe Tenor is detecting likely-human browser user agents and doing it that way? But also yeah you may be able to achieve this with meta tags too Also I guess beware this tends to really annoy power users

Catt0s•14mo ago

i was using AS numbers on cloudflare but idk

Gaming

Programming

URL Rewrite to remove file extension