Learn CLOUDFLARE-WORKERS with Real Code Examples
Updated Nov 25, 2025
Code Sample Descriptions
1
Simple Cloudflare Worker (JavaScript)
# cloudflare/demo/worker.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
return new Response('Hello, World!', { status: 200 })
}
A basic Cloudflare Worker that responds with 'Hello, World!' to HTTP requests.
2
Cloudflare Worker with JSON Response
# cloudflare/demo/json.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const data = { message: 'Hello, JSON World!' }
return new Response(JSON.stringify(data), {
status: 200,
headers: { 'Content-Type': 'application/json' }
})
}
A Cloudflare Worker returning a JSON response.
3
Cloudflare Worker Redirect
# cloudflare/demo/redirect.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
return Response.redirect('https://example.com', 302)
}
A Worker that redirects all requests to another URL.
4
Cloudflare Worker Echo Request
# cloudflare/demo/echo.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
return new Response('You requested: ' + request.url, { status: 200 })
}
A Worker that echoes back the request URL.
5
Cloudflare Worker with Query Parameters
# cloudflare/demo/query.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const url = new URL(request.url)
const name = url.searchParams.get('name') || 'Guest'
return new Response('Hello, ' + name, { status: 200 })
}
A Worker that reads query parameters and responds with them.
6
Cloudflare Worker with HTML Response
# cloudflare/demo/html.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const html = '<!DOCTYPE html><html><body><h1>Hello HTML World!</h1></body></html>'
return new Response(html, {
status: 200,
headers: { 'Content-Type': 'text/html' }
})
}
A Worker responding with a basic HTML page.
7
Cloudflare Worker with Custom Headers
# cloudflare/demo/headers.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
return new Response('Custom Header Added', {
status: 200,
headers: { 'X-Custom-Header': 'MyWorker' }
})
}
A Worker that adds custom headers to the response.
8
Cloudflare Worker Fetch External API
# cloudflare/demo/fetch-api.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const apiResponse = await fetch('https://api.github.com')
const data = await apiResponse.json()
return new Response(JSON.stringify(data), {
status: 200,
headers: { 'Content-Type': 'application/json' }
})
}
A Worker fetching data from an external API and returning it.
9
Cloudflare Worker with Environment Variable
# cloudflare/demo/env.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const apiKey = MY_SECRET_API_KEY
return new Response('API Key length: ' + apiKey.length, { status: 200 })
}
A Worker using environment variables from Cloudflare KV or Secrets.
10
Cloudflare Worker with Conditional Response
# cloudflare/demo/method.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
if (request.method === 'POST') {
return new Response('You sent a POST request', { status: 200 })
} else {
return new Response('You sent a GET request', { status: 200 })
}
}
A Worker responding differently based on request method.