Proxy to External HTTP Server

Hey Cloudflare folk!

I’m new to cloudflare, and a noob to systems-level stuff. I’m hoping that cloudflare can be useful for a personal project that I’m working on.

I’ve got a react application hosted on github pages (HTTPS), but it requests, through chrome XHR, to a service that only supports HTTP—the NextBus API (San Francisco bus times) at http://webservices.nextbus.com/service/publicXMLFeed. Browsers don’t like the mixed http/https traffic, so I’d like to proxy that traffic for my application. I’ve emailed them, but their customer is the government, so good luck getting that traffic over HTTPS anytime in this decade.

I don’t care what the domain name is, just need to wrap that HTTP traffic in HTTPS, and forward along the same Access-Control-Allow-Origin: * header that they already set. If I could set my own headers, that’d be cool too.

I don’t expect more than 10k requests a day (I poll every 10s), and don’t anticipate ever needing to scale up from there.

Are there any guides that can help me with this? I’m a bit overwhelmed with all the features of cloudflare, and don’t know where to start. Is cloudflare even the right tool for this? I’m hoping there’s somewhere I can drop in some nginx config with under 20 lines and never think about it again.

You could probably accomplish this with Workers.
There’s a free tier which allows up to 100.000 requests a day, so that will probably suffice for this. You can check out the template gallery for some Worker examples to get started.

Something like this will probably get the job done

https://cloudflareworkers.com/#f1c9791d9cd839c58a571b36282545cc:https://example.com/service/publicXMLFeed

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a given request object
 * @param {Request} request
 */
async function handleRequest(request) {
  let modifiedURL = new URL(request.url)
  modifiedURL.protocol = 'http:'
  modifiedURL.hostname = 'webservices.nextbus.com'

  const modifiedRequest = new Request(
    modifiedURL.toString(),
    new Request(request)
  )

  console.log('Got request', modifiedRequest)
  const response = await fetch(modifiedRequest)
  console.log('Got response', modifiedRequest)
  return response
}

You can modify that more to your specific use case and then use this example as a guide: Modify request property