Couldn't solve Blocked by no cors policy.

I tried everyting that I could to solve cors policy but doesn't seem working.

Here is my worker :
export default {
    async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
        const url = new URL(request.url);
        const key = url.pathname.slice(1);

        // // Add CORS headers to the response
        const headers = new Headers();
        headers.append('Access-Control-Allow-Origin', '*'); // Replace '*' with your actual allowed origin
        headers.append('Access-Control-Allow-Methods', 'GET, PUT, DELETE');
        headers.append('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Auth-Key');

        if (request.method === 'OPTIONS') {
            // Handle preflight OPTIONS request
            return new Response(null, { headers });
        }
        if (!authorizeRequest(request, env, key)) {
            return new Response(`Unauthorized`, { status: 401 });
        }

        switch (request.method) {
            case 'PUT':
                await env.MY_BUCKET.put(key, request.body);
                return new Response(`Successfully wrote to ${key}`);

            case 'GET':
                const object = await env.MY_BUCKET.get(key);
                if (object) {
                    object.writeHttpMetadata(headers);
                    headers.set('e-tag', object.httpEtag);
                    return new Response(object.body, { status: 200, headers });
                } else {
                    return new Response(`Object ${key} doesn't exists`, { status: 404 });
                }

            case 'DELETE':
                await env.MY_BUCKET.delete(key);
                return new Response(`Successfully deleted ${key}`);

            default:
                return new Response(`Method ${request.method} not allowed!`, { status: 405, headers: { Allow: 'GET,PUT,DELETE' } });
        }
    },
};

What am I doing wrong here ?
Was this page helpful?