We want to turn an Apache proxy into a Cloudflare worker on the edge:
We use the preserve host config:
ProxyPreserveHost On
ProxyPass /blog http://wordpress.example.com/blog
ProxyPassReverse /blog http://wordpress.example.com/blog
So
example.com/blog
opens the blog.
We tried this script:
export default {
async fetch(request, env) {
var url = new URL(request.url);
// set hostname to the place we're proxying requests from
url.protocol = "http"
url.hostname = "wordpress.example.com"
let response = await fetch(url, {"headers":{"Host":"example.com"}}))
return response;
}
}
But it causes a 500 server error
I looks like the host header cannot be overwritten in the fetch API? Is this also true for such server side code or only in the browser / for AJAX requests?
Another approach I tried:
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const url = new URL(request.url);
url.protocol = 'http';
url.hostname = '<IP of the wordpress server>';
console.log(request);
var req = new Request(request.url, {
method: request.method,
headers: request.headers,
redirect: 'manual' // let browser handle redirects
});
req.headers.set('Host', 'www.example.com');
const data = await fetch(url.toString(),req);
return data;
}
But I get a permission denied response.