template-registry/templates/javascript/cors_header_proxy.js at e1ff4fa08e7481e8ba2ccc2ee9a95d6fa419deb3 · cloudflare/template-registry · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
async function handleRequest(request) {
  const url = new URL(request.url)
  const apiurl = unescape(unescape(url.search.substr(8)));
  // 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 necesssary headers are present
  // for this to be a valid pre-flight request
  if (
    request.headers.get('Origin') !== null &&
    request.headers.get('Access-Control-Request-Method') !== null &&
    request.headers.get('Access-Control-Request-Headers') !== null
  ) {
    // Handle CORS pre-flight request.
    // If you want to check the requested method + headers
    // you can do that here.
    return new Response(null, {
      headers: corsHeaders,
    })
  } 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(proxyEndpoint)) {
    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(async () => {
        return new Response(null, {
          status: 405,
          statusText: 'Method Not Allowed',
        })
      })
    }
  } else {
    // Serve demo page
    event.respondWith(rawHtmlResponse(demoPage))
  }
})
// We support the GET, POST, HEAD, and OPTIONS methods from any origin,
// and accept the Content-Type header on requests. These headers must be
// present on all responses to all CORS 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-Allow-Headers': 'Content-Type',
}
// The URL for the remote third party API you want to fetch from
// but does not implement CORS
const apiurl = 'https://workers-tooling.cf/demos/demoapi'
// The endpoint you want the CORS reverse proxy to be on
const proxyEndpoint = '/corsproxy/'
// The rest of this snippet for the demo page
async function rawHtmlResponse(html) {
  return new Response(html, {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  })
}
const demoPage = `
<!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('${apiurl}')
    return await response.json()
  }
  reqs.proxy = async () => {
    let response = await fetch(window.location.origin + '${proxyEndpoint}?apiurl=${apiurl}')
    return await response.json()
  }
  reqs.proxypreflight = async () => {
    const reqBody = {
      msg: "Hello world!"
    }
    let response = await fetch(window.location.origin + '${proxyEndpoint}?apiurl=${apiurl}', {
      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>`