Skip to content
Cloudflare Docs
Workers
Cloudflare Docs
Workers
Search icon (depiction of a magnifying glass)
GitHub icon
Visit Workers on GitHub
Set theme to dark (⇧+D)

CORS header proxy

Add the necessary CORS headers to a third party API response.

// We support the GET, POST, HEAD, and OPTIONS methods from any origin,// and allow any header on requests. These headers must be present// on all responses to all CORS preflight requests. In practice, this means// all responses to OPTIONS requests.const corsHeaders = {  "Access-Control-Allow-Origin": "*",  "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",  "Access-Control-Max-Age": "86400",}
// The URL for the remote third party API you want to fetch from// but does not implement CORSconst API_URL = "https://examples.cloudflareworkers.com/demos/demoapi"
// The endpoint you want the CORS reverse proxy to be onconst PROXY_ENDPOINT = "/corsproxy/"
// The rest of this snippet for the demo pageasync function rawHtmlResponse(html) {  return new Response(html, {    headers: {      "content-type": "text/html;charset=UTF-8",    },  })}
const DEMO_PAGE = `  <!DOCTYPE html>  <html>  <body>    <h1>API GET without CORS Proxy</h1>    <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful">Shows TypeError: Failed to fetch since CORS is misconfigured</a>    <p id="noproxy-status"/>    <code id="noproxy">Waiting</code>    <h1>API GET with CORS Proxy</h1>    <p id="proxy-status"/>    <code id="proxy">Waiting</code>    <h1>API POST with CORS Proxy + Preflight</h1>    <p id="proxypreflight-status"/>    <code id="proxypreflight">Waiting</code>    <script>    let reqs = {};    reqs.noproxy = async () => {      let response = await fetch("${API_URL}")      return await response.json()    }    reqs.proxy = async () => {      let response = await fetch(window.location.origin + "${PROXY_ENDPOINT}?apiurl=${API_URL}")      return await response.json()    }    reqs.proxypreflight = async () => {      const reqBody = {        msg: "Hello world!"      }      let response = await fetch(window.location.origin + "${PROXY_ENDPOINT}?apiurl=${API_URL}", {        method: "POST",        headers: {          "Content-Type": "application/json"        },        body: JSON.stringify(reqBody),      })      return await response.json()    }    (async () => {      for (const [reqName, req] of Object.entries(reqs)) {        try {          let data = await req()          document.getElementById(reqName).innerHTML = JSON.stringify(data)        } catch (e) {          document.getElementById(reqName).innerHTML = e        }      }    })()    </script>  </body>  </html>`
async function handleRequest(request) {  const url = new URL(request.url)  let apiUrl = url.searchParams.get("apiurl")
  if (apiUrl == null) {    apiUrl = API_URL  }
  // Rewrite request to point to API url. This also makes the request mutable  // so we can add the correct Origin header to make the API server think  // that this request isn't cross-site.  request = new Request(apiUrl, request)  request.headers.set("Origin", new URL(apiUrl).origin)  let response = await fetch(request)
  // Recreate the response so we can modify the headers  response = new Response(response.body, response)
  // Set CORS headers  response.headers.set("Access-Control-Allow-Origin", url.origin)
  // Append to/Add Vary header so browser will cache response correctly  response.headers.append("Vary", "Origin")
  return response}
function handleOptions(request) {  // Make sure the necessary headers are present  // for this to be a valid pre-flight request  let headers = request.headers;  if (    headers.get("Origin") !== null &&    headers.get("Access-Control-Request-Method") !== null &&    headers.get("Access-Control-Request-Headers") !== null  ){    // Handle CORS pre-flight request.    // If you want to check or reject the requested method + headers    // you can do that here.    let respHeaders = {      ...corsHeaders,    // Allow all future content Request headers to go back to browser    // such as Authorization (Bearer) or X-Client-Name-Version      "Access-Control-Allow-Headers": request.headers.get("Access-Control-Request-Headers"),    }
    return new Response(null, {      headers: respHeaders,    })  }  else {    // Handle standard OPTIONS request.    // If you want to allow other HTTP Methods, you can do that here.    return new Response(null, {      headers: {        Allow: "GET, HEAD, POST, OPTIONS",      },    })  }}
addEventListener("fetch", event => {  const request = event.request  const url = new URL(request.url)  if(url.pathname.startsWith(PROXY_ENDPOINT)){    if (request.method === "OPTIONS") {      // Handle CORS preflight requests      event.respondWith(handleOptions(request))    }    else if(      request.method === "GET" ||      request.method === "HEAD" ||      request.method === "POST"    ){      // Handle requests to the API server      event.respondWith(handleRequest(request))    }    else {      event.respondWith(        new Response(null, {          status: 405,          statusText: "Method Not Allowed",        }),      )    }  }  else {    // Serve demo page    event.respondWith(rawHtmlResponse(DEMO_PAGE))  }})