문제

아래와 같은 코드를 배포하고 Workers 엔드포인트에 웹브라우저로 접속하면

• Durable object에 첫 요청을 보내면 Hello, 1이 반환됨
• 이후 카운트 helloCnt가 2씩 증가함 (3, 5, 7, ...)

import { DurableObject } from 'cloudflare:workers';

// Durable Object
export class MyDurableObject extends DurableObject {
	helloCnt;

	constructor(ctx, env) {
		super(ctx, env);
		this.helloCnt = 0;
	}

	hello() {
		this.helloCnt++;
		return new Response(`Hello, ${this.helloCnt}`);
	}

	async fetch(request) {
		const url = new URL(request.url);

		switch (url.pathname) {
			case '/hello':
				return this.hello();
			default:
				return new Response('Bad Request', { status: 400 });
		}
	}
}

// Worker
export default {
	async fetch(_request, env, _ctx) {
		const id = env.MY_DURABLE_OBJECT.idFromName('foo');
		const stub = env.MY_DURABLE_OBJECT.get(id);
		let response = await stub.fetch(`http://do/hello`);

		return response;
	},
};

원인

파비콘 요청때문에 그렇다.
웹브라우저로 Durable objects에 묶인 workers URL로 접속하면 두 번의 요청을 한다.

• 요청한 그 URL로 한 번
• 요청한 그 URL/favicon.ico로 또 한 번

브라우저가 아닌 API호출도구로 요청해보면 파비콘을 호출하지 않는다.

해결

요청에 웹브라우저 접속을 사용하지 않는다

해결: 웹브라우저로 worker를 접속하고 싶다면

1. 파비콘 요청 무시 (worker fetch쪽에서 거르기)

// Worker
// 접속 URL은 기존과 동일: Worker 엔드포인트
export default {
	async fetch(_request, env, _ctx) {
      	// favicon 요청 무시
		const url = new URL(_request.url);
		if (url.pathname === '/favicon.ico') {
			return new Response(null, { status: 404 });
		}

		const id = env.MY_DURABLE_OBJECT.idFromName('foo');
		const stub = env.MY_DURABLE_OBJECT.get(id);
		let response = await stub.fetch(`http://do/hello`);

		return response;
	},
};

2. path를 동적으로 박아주고, Durable object fetch 쪽에서 거르기

// Worker
// 아래 코드의 경우 접속 URL은 "<Worker 엔드포인트>/hello"
export default {
	async fetch(_request, env, _ctx) {
		const url = new URL(_request.url);

		const id = env.MY_DURABLE_OBJECT.idFromName('foo');
		const stub = env.MY_DURABLE_OBJECT.get(id);
      	// 이렇게 path를 명확하게 박아주게 되면
      	// 포스트 최상단 코드 durable object의 fetch()-switch에서 걸러짐
      	// (Bad Request 반환)
		let response = await stub.fetch(`http://do${url.pathname}`);

		return response;
	},
};

// Durable Object
export class MyDurableObject extends DurableObject {
	...
	async fetch(request) {
		const url = new URL(request.url);
		switch (url.pathname) {
			...
			default:
				return new Response('Bad Request', { status: 400 });
		}
	}
}