🐛 BUG: `pages dev` HTTP 406 on `env.ASSETS.fetch()`

[colecrouter]

What version of Wrangler are you using?

0.0.15

What operating system are you using?

Windows

Describe the Bug

Try this:

export const onRequestGet: PagesFunction<{}> = async ({ request, env, next, data, params }) => {
    const cloned = request.clone();
    const dest = `https://some-page.dev/`;
    return env.ASSETS.fetch(new Request(dest, { headers: cloned.headers }));
};

Run wrangler pages dev ./

Works as expected on Wrangler, fetches the index page for https://some-page.dev/. On Pages, env.ASSETS.fetch() returns a 406 error with no body. I've confirmed that it is env.ASSETS.fetch() that's returning the error, and that the worker isn't just dying.

Here's an example response:

        "response": {
          "status": 406,
          "statusText": "",
          "httpVersion": "h3",
          "headers": [
            {
              "name": "date",
              "value": "Tue, 01 Feb 2022 23:53:01 GMT"
            },
            {
              "name": "content-length",
              "value": "0"
            },
            {
              "name": "expect-ct",
              "value": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\""
            },
            {
              "name": "report-to",
              "value": "{\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report\\/v3?s=SEj8%2BhNNl%2F31mCPN76ltZtRFew7hoKTHlFyXPakdNoR2dpBUfCsl%2FaDStznbbAG6ZtmGQaCrIGJpV9fr3QFs%2BubBDV5Hi8fRKNLq3LB6sBCB3wUTt5Paa63t%2FN6Yz9djp6NE\"}],\"group\":\"cf-nel\",\"max_age\":604800}"
            },
            {
              "name": "nel",
              "value": "{\"success_fraction\":0,\"report_to\":\"cf-nel\",\"max_age\":604800}"
            },
            {
              "name": "vary",
              "value": "Accept-Encoding"
            },
            {
              "name": "cf-cache-status",
              "value": "DYNAMIC"
            },
            {
              "name": "server",
              "value": "cloudflare"
            },
            {
              "name": "cf-ray",
              "value": "6d6f18c83c5e840e-YVR"
            },
            {
              "name": "alt-svc",
              "value": "h3=\":443\"; ma=86400, h3-29=\":443\"; ma=86400"
            }
          ],
          "cookies": [],
          "content": {
            "size": 0,
            "mimeType": "text/plain"
          },
          "redirectURL": "",
          "headersSize": -1,
          "bodySize": -1,
          "_transferSize": 514,
          "_error": "net::ERR_HTTP_RESPONSE_CODE_FAILURE"
        },

[Cherry]

I also ran into this issue today when attempting to migrate an older Workers Sites project.

My use-case here is an index.html, and test.html. I want to serve the index.html unless there's a query parameter in the URL (like q), and in which case, get the test.html and run an HTMLRewriter over it.

Reproduction repo: https://github.com/Cherry/universe-horse-test URL: https://d9b84466.universe-horse-test.pages.dev/ 406 (works fine in dev with wrangler@[email protected], other than a redirect issue if I use the full path with .html): https://d9b84466.universe-horse-test.pages.dev/?test=1

EDIT: I managed to hack around it by doing this instead: https://github.com/Cherry/universe-horse-test/commit/1e1b67cb7ece6306fdffe061c4be80663ded34a2.

[falcon03]

I run across the same issue and can confirm this nasty bug. I got referenced to this issue from a topic in the Cloudflare community forum:

https://community.cloudflare.com/t/response-406-unacceptable-on-env-assets-fetch-for-yaml-file/400603

My use-case is trying to load a YAML file from my cloudflare pages project within a functions middleware (that is part of the same project). The code worked locally (using wrangler pages dev), but not in production!

[colecrouter]

@falcon03, a workaround for this problem could look like this:

export const onRequestGet: PagesFunction<{}> = async ({ request }) => {
    return fetch("./myfile.yaml", request.url)
};

This does a regular fetch request, which piggybacks off the incoming request's URL. Of course, this requires that your YAML file publicly accessible. This would results in fetching http://localhost/myfile.yaml locally, and https://something.pages.dev/myfile.yaml when hosted.

I haven't tried Cherry's answer, but that should work too.

[Cherry]

This impacted another user in the Discord today: https://canary.discord.com/channels/595317990191398933/910978223968518144/1004857593656786974

Can we get some eyeballs on this issue please? It's a massive prod vs development issue when doing anything slightly advanced within Functions.

[Cherry]

This doesn't just impact env.ASSETS.fetch. The following also triggers a 406, with an accompanying test.html file:

// functions/testing.js
export async function onRequestGet({request, next}){
    const url = new URL(request.url);
    url.pathname = '/test';
    return next(url.toString());
}

[Cherry]

I'm no longer able to reproduce this - it seems to be resolved.

[JacobMGEvans]

Closing for now.