Hey, Cloudflare Community!
I’m try to create a Worker with support arbitrary URL, to generate access for websites and I use this template:
"use strict";
if (typeof addEventListener === 'function') {
addEventListener('fetch', (e) => {
// work around as strict typescript check doesn't allow e to be of type FetchEvent
const fe = e;
fe.respondWith(proxyRequest(fe.request));
});
}
async function proxyRequest(r) {
const url = new URL(r.url);
const prefix = '/website/';
if (url.pathname.startsWith(prefix)) {
const remainingUrl = url.pathname.replace(new RegExp('^' + prefix), '');
let targetUrl = decodeURIComponent(remainingUrl);
if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
targetUrl = url.protocol + '//' + targetUrl;
}
return fetch(targetUrl);
}
else {
return new Response('Bad Request', { status: 400, statusText: 'Bad Request' });
}
}
This script is work https://myworkers.workers.dev/website/telegram.org
, but the websites a loaded incorrect, css, images not load. Next, I found this template:
async function handleRequest(request) {
const url = new URL(request.url)
if (url.hostname in ORIGINS) {
const target = ORIGINS[url.hostname]
url.hostname = target
return fetch(url.toString(), request)
}
return fetch(request)
}
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
const ORIGINS = {
'myworkers.workers.dev': 'telegram.org'
}
This script fully loads the site, it supports styles and images, but not supports arbitrary URL, he generate access only for website from const ORIGINS
code block.
Please help me, how I can change the first or second template to combine their functionality in order to load sites correctly and support arbitrary URLs?