Reverse proxy working for page, but assets are all 404

Hello. I have set up a worker on our account to have blog.mydomain.com to go to mydomain.com/blog. We’re using a WordPress site on the subdomain. I have successfully set up the worker to show the subdomain as a subdirectory but all of the images/css/js files are 404ing. Here is the code I am using, which I got from the Cloudflare blog.

// keep track of all our blog endpoints here
const myBlog = {
  hostname: "blog.mydomain.com",
  targetSubdirectory: "/blog",
  assetsPathnames: ["/wp-includes/", "/wp-admin/", "/wp-content/"]
}

async function handleRequest(request) {
  // returns an empty string or a path if one exists
  const formatPath = (url) => {
    const pruned = url.pathname.split("/").filter(part => part)
    return pruned && pruned.length > 1 ? `${pruned.join("/")}` : ""
  }
  
  const parsedUrl = new URL(request.url)
  const requestMatches = match => new RegExp(match).test(parsedUrl.pathname)
  
  // if its blog html, get it
  if (requestMatches(myBlog.targetSubdirectory)) {
    console.log("this is a request for a blog document", parsedUrl.pathname)
    const targetPath = formatPath(parsedUrl)
    
    return fetch(`https://${myBlog.hostname}/${targetPath}`)
  }
  
  // if its blog assets, get them
  if ([myBlog.assetsPathnames].some(requestMatches)) {
    console.log("this is a request for blog assets", parsedUrl.pathname)
    const assetUrl = request.url.replace(parsedUrl.hostname, myBlog.hostname);

    return fetch(assetUrl)
  }

  console.log("this is a request to my root domain", parsedUrl.host, parsedUrl.pathname);
  // if its not a request blog related stuff, do nothing
  return fetch(request)
}

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

I also have routes set up as follows:

I’ve attempted adding the “asset folders” as part of the routes as well, but to no avail.

It would seem that the [myBlog.assetsPathnames].some(requestMatches) is always returning false. Not 100% sure why? I’m also not sure I’m doing my routes correctly.

Any help on this would be greatly, greatly appreciated.

I believe I have figured it out. On the WordPress side, I had to set the WordPress Address as the subdomain and the Site Address as the sub-directory URL. For example:

WordPress Address (URL) : https://blog.mydomain.com
Site Address (URL) : https://www.mydomain.com/blog

This is working for me as all the asset paths are using the subdomain but please let me know if there is a different/better way to do this.

Thanks.

1 Like

Yes, the sub-domain blog.domain.com and directory www.domain.com/blog is not the same (either it can be located inside the same www or public_html, which at first sight would look as the same thing).

Site URL and home/blog URL should be the same - mostly are - but, in some cases you can even have separated /wp-content/ on the other location or disk, as far as I have seen some people even separate wp-admin, which could result in a “disaster” if not well routed and maintained (not the same as for example hiding it with WP Hide etc.).

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.