Soy un novato en Cloudflare Workers.
¿Cómo configurar CORS en Cloudflare Workers?
response = await cache.match(cacheKey); if (!response) { // handle fetch data and cache } const myHeaders = new Headers(); myHeaders.set("Access-Control-Allow-Origin", event.request.headers.get("Origin")); return new Response(JSON.stringify({ response }), { status: 200, headers: myHeaders });Es bastante doloroso en realidad. Hay una muestra de Cloudflare , pero no se puede usar directamente. Finalmente lo resolví recientemente y puse los pasos detallados en una publicación de blog .
Aquí está el código completo para el trabajador.
// Reference: https://developers.cloudflare.com/workers/examples/cors-header-proxy const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS", "Access-Control-Max-Age": "86400", } 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", }, }) } } async function handleRequest (request) { let response if (request.method === "OPTIONS") { response = handleOptions(request) } else { response = await fetch(request) response = new Response(response.body, response) response.headers.set("Access-Control-Allow-Origin", "*") response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") } return response } addEventListener("fetch", (event) => { event.respondWith( handleRequest(event.request).catch( (err) => new Response(err.stack, { status: 500 }) ) ); });Su código no establece el encabezado de tipo de contenido. Debe configurarlo con myHeaders.set() o usar los encabezados de respuesta originales en lugar de crear un objeto de encabezado vacío:
response = await cache.match(cacheKey); if (!response) { // handle fetch data and cache } const myHeaders = new Headers(response.headers); myHeaders.set("Access-Control-Allow-Origin", event.request.headers.get("Origin"));También me pregunto por qué intenta usar JSON.stringify en la respuesta. Creo que lo que quieres es algo como esto:
return new Response(response.body, {status: 200, headers: myHeaders});