Rule Snippet not working in real world broswer

Application Performance
1

What is the name of the domain?

muncho ai

What is the error number?

404

What is the error message?

(failed)net::ERR_HTTP_RESPONSE_CODE_FAILURE

What is the issue you’re encountering

I write a rule snippet that would rewirte the query part of the URL to resize the image to a path part that uses Cloudflare built-in image resizing worker. This snippet works in the snippet editor, but failed in the broswer in the real world.

2

Below is my rule snippet code.

 
export default {
  async fetch(request) {
    const newURL = new URL(request.url);
    newURL.pathname = newURL.pathname.replace(/([^:]\/)\/+/g, '$1');
    if (newURL.search.includes('?x-oss-process=image%2Fresize%2Cl_')) {
      const pathParts = newURL.search.split('?x-oss-process=image%2Fresize%2Cl_');
      newURL.search = '';
      newURL.pathname = `/cdn-cgi/image/fit=contain,height=${pathParts[1]},width=${pathParts[1]}` + newURL.pathname;
    }
    else if (newURL.search.includes('?x-oss-process=image/resize,l_')) {
      const pathParts = newURL.search.split('?x-oss-process=image/resize,l_');
      newURL.search = '';
      newURL.pathname = `/cdn-cgi/image/fit=contain,height=${pathParts[1]},width=${pathParts[1]}` + newURL.pathname;
    }
    const response = await fetch(newURL);
    return response;
  },
};
3

Do you have an example URL that doesn’t work?

4

Thanks for your response. Yes.
For example below is a URL:

https://things.muncho.ai/website/businesses/5fffa103bf58ce2bb1f92949/20210506222432d497e800-aeb9-11eb-a321-d143352322ac.jpeg?x-oss-process=image/resize,l_300

If I removed the query, it could be accessed.

5

Or, alternatively, if you change “?x-oss-process=” to something else, such as e.g. “?x-oss-processs=” (note the extra “s”), it would work too.

Mind if I ask how exactly you ended up with the code you shared?

  1. What lead you to use stuff like e.g. "newURL.search.includes" and “newURL.search.split”?

  2. What lead you to set the response variable to the await fetch(), and then “return response;”?
    → If you simply do “return await fetch(newURL);”, does that make a difference?

When I am playing around with the code provided (setting “request.url” to the URL you provided), then at least the ELSE IF is producing a link, that generally seems to be working fine (when queried directly).

For a brief moment though, the “/cdn-cgi/image/fit” link you’re fetching from, were returning 403 Forbidden, with the text “Strange.” in the response body.

2 Likes
7

This topic was automatically closed after 15 days. New replies are no longer allowed.