cloudflare-adapter usage with Cloudflare Pages functions

[boojum]

Describe the bug

I'm trying to add a CORS proxy function to a SvelteKit app running on Cloudflare Pages (deployed here, repo here). Source of the (trivial) proxy function lives at function/corsproxy/[[any]].js and looks as follow:

const API_URL = 'https://itunes.apple.com/';

const corsHeaders = {
	'Access-Control-Allow-Origin': '*',
	'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
	'Access-Control-Max-Age': '86400'
};

export async function onRequest(context) {
	// Contents of context object
	let {
		request, // same as existing Worker API
		env, // same as existing Worker API
		params, // if filename includes [id] or [[path]]
		waitUntil, // same as ctx.waitUntil in existing Worker API
		next, // used for middleware or to fetch assets
		data // arbitrary space for passing data between middlewares
	} = context;

	const url = new URL(request.url);

	request = new Request(API_URL, request);
	request.headers.set('Origin', new URL(API_URL).origin);
	let response = await fetch(request);

	// Recreate the response so we can modify the headers
	response = new Response(response.body, response);

	// Set CORS headers
	response.headers.set('Access-Control-Allow-Origin', url.origin);

	// Append to/Add Vary header so browser will cache response correctly
	response.headers.append('Vary', 'Origin');

	return response;
}

The "bare" app, without function/corsproxy/[[any]].js, renders just fine although it produces the "Access-Control-Allow-Origin" CORS error. With the proxy function all requests to the app produce 404, even request for the static assets.

Reproduction

1. Create a Gitlab repo, initialise it with code from this repo.
2. Create a Cloudflare Pages project with the repo from 1. For the project settings use:
   • Build command: npm run build
   • Build output directory: .svelte-kit/cloudflare
   • correct node version is set via .node-version file
3. Deploy & visit the app.
4. Observe 404 errors.

Logs

No response

System Info

System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (4) x64 Intel(R) Pentium(R) CPU N4200 @ 1.10GHz
    Memory: 341.84 MB / 3.67 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/bin/node
    npm: 8.1.0 - /usr/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: 94.0.1
  npmPackages:
    @sveltejs/adapter-cloudflare: ^1.0.0-next.2 => 1.0.0-next.2 
    @sveltejs/kit: next => 1.0.0-next.196 
    svelte: ^3.42.6 => 3.44.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

[tylerbrostrom]

This is expected.

Per Cloudflare Pages docs:

Pages offers developers the ability to define a _worker.js file in the output directory of your Pages project. When using a _worker.js file, the entire /functions directory is ignored – this includes its routing and middleware characteristics.

The adapter’s implementation outputs a _worker.js file, meaning your /functions will be ignored. I’d say it’s unlikely that aspect of the adapter’s implementation would/should change.

You should instead implement routes as a SvelteKit Endpoint. For middleware-esque stuff like adding proper CORS headers, that can be implemented in the SvelteKit handle hook.

[tv42]

This makes it trickier to stay below the Cloudflare Worker size limit. Having multiple independent small workers would be better for that.

Could cloudflare-adapter just write to functions/[[path]].js instead of _worker.js? Then more-specific paths would still work as independent workers.

[tylerbrostrom]

This makes it trickier to stay below the Cloudflare Worker size limit.

No, the scripts in the functions folder are compiled to a single Worker, not to individual Workers (i.e. the functions folder format is subject to same size limit as _worker.js format).

[tv42]

Oh, that's a bit of a disappointment. The size limit isn't very big, simply importing mapbox-gl is about 1/3rd of the budget already.

[tylerbrostrom]

Yep. The Cloudflare team has indicated Worker script size limits are likely to increase in the future. When and by how much is unclear.

Edit: @tv42, apparently you can sign up for early acces to larger worker script sizes 👍

[jbergstroem]

The work from @Rich-Harris in PR #2931 seems relevant as well.

[Rich-Harris]

Opened #4753 to clarify this