Created
July 18, 2022 22:01
-
-
Save viluon/5d2c3773ee8410523ce282be573f73d5 to your computer and use it in GitHub Desktop.
Deploy this with CloudFlare Workers to get a CORS proxy for your Copy Cat deployment.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Cloudflare supports 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 rest of this snippet for the demo page | |
function rawHtmlResponse(html) { | |
return new Response(html, { | |
headers: { | |
'content-type': 'text/html;charset=UTF-8', | |
}, | |
}); | |
} | |
async function handleRequest(request) { | |
const url = new URL(request.url); | |
var apiUrl = url.pathname | |
.substring(1) | |
.replace(/^http:\//, "http://") | |
.replace(/^https:\//, "https://") | |
+ url.search; | |
console.log(apiUrl); | |
// Rewrite request to point to API URL. This also makes the request mutable | |
// so you can add the correct Origin header to make the API server think | |
// that this request is not cross-site. | |
request = new Request(apiUrl, request); | |
request.headers.set('Origin', new URL(apiUrl).origin); | |
let response = await fetch(request); | |
// Recreate the response so you can modify the headers | |
response = new Response(response.body, response); | |
// Set CORS headers | |
for (let [k, v] of Object.entries(corsHeaders)) { | |
console.log(k, v); | |
response.headers.set(k, v); | |
} | |
response.headers.set('Origin', url.origin); | |
let location = response.headers.get("location"); | |
if (location != null) { | |
response.headers.set("location", url.origin + "/" + location); | |
} | |
// 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 (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', | |
}) | |
); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment