Wrangler not calling pages functions but returning `index.html`

I have a poject looks like:

With frontend source in /src, compiled things for frontend in /dist and functions in /functions. Here is a function /api/foo.

And I started wrangler with npx wrangler pages dev dist --port 3000.
And when I am editing foo.ts, wrangler would say Compiled Worker successfully, so it knows there should be a worker.

However when I try calling /api/foo from frontend, like:

const url = new URL('/api/foo', location.origin)
return fetch(url.toString())

and try responding it in foo.ts with

async fetch(request: Request): Promise<Response> {
return new Response('', { status: 403 })

However, wrangler would just respond the content of index.html with a 200 OK, just like a normal static

So where am I missing or doing wrong ?

So CF functions is different from workers and I have to export const onRequest or export const onRequest[Method] to make it a function, otherwise the function file is not actually considered a function, and the request will be routed as a static one.