Couldn't understand the Error CORS

Hi guys

new here in cloudflare stuff
i try to build webpage that i want to upload my image or any other files to cloudflare r2.

however i got an issues where:

Access to fetch at 'https://property-image.5ccaf923a211272cb29f4f76f561a3d2.r2.cloudflarestorage.com/1708152452157-rekap-all-va-ecoll-per-jan-2022-okt-2023-xlsx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=2ac1e54a60f8a09c9f63ac0b836fa420%2F20240217%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240217T064732Z&X-Amz-Expires=300&X-Amz-Signature=ce850f7f970893fbe32f4a71a504ba6fe458658bc6c942ee4d1e2de3ad760159&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

here is my +page.svelte:

<script lang="ts">
	import Dashboard from '@uppy/dashboard';
	import Uppy from '@uppy/core';
	import '@uppy/core/dist/style.css';
	import '@uppy/dashboard/dist/style.css';
	import { onMount } from 'svelte';

	const handleFileUpload = async (e: Event) => {
		const target = e.target as HTMLInputElement;
		const file = target.files?.[0];

		if (file) {
			const getPresignedUrlResponse = await fetch('/api/upload', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					fileName: file.name,
					fileType: file.type
				})
			});

			if (!getPresignedUrlResponse.ok) {
				console.error('Failed to get presigned URL');
			}

			const { presignedUrl, objectKey } = await getPresignedUrlResponse.json();
			const uploadToR2Response = await fetch(presignedUrl, {
				method: 'PUT',
				headers: {
					'Content-Type': file.type
				},
				body: file
			});
			if (!uploadToR2Response.ok) {
				console.error('Failed to upload file to R2');
			}
		}
	};

	
</script>

<main class="mx-auto">
	<div class="container h-screen w-full">
		<!-- <div id="dashboard" on:change={handleFileUpload}></div> -->
		<input type="file" on:change={handleFileUpload}/>
	</div>
</main>

here is my +server.ts:

import { PUBLIC_S3_BUCKET_NAME } from ‘$env/static/public’;
import { S3 } from ‘$lib/s3’;
import { PutObjectCommand } from ‘@aws-sdk/client-s3’;
import { getSignedUrl } from ‘@aws-sdk/s3-request-presigner’;
import { json } from “@sveltejs/kit”;

const slugifyString = (str: string) => {
return str.trim().toLowerCase().replace(/\s+/g, ‘-’).replace(/./g, ‘-’).replace(/-+/g, ‘-’).replace(/[^a-z0-9-]/g, ‘-’);
}

export const POST = async ({ request }) => {
const { fileName, fileType, } = await request.json() as { fileName: string | undefined, fileType: string | undefined };

if (!fileName || !fileType || fileName.trim() === '' || fileType.trim() === '') {
    return json({ message: 'Missing required parameters.' }, { status: 400 });
}

const objectKey = `${slugifyString(Date.now().toString())}-${slugifyString(fileName)}`;

const presignedUrl = await getSignedUrl(S3, new PutObjectCommand({
    Bucket: PUBLIC_S3_BUCKET_NAME,
    Key: objectKey,
    ContentType: fileType,
    ACL: 'public-read'
}), {
    expiresIn: 60 * 5 // 5 minutes
});

return json({ presignedUrl, objectKey });

};

here is my s3.ts:

import { R2_ACCESS_KEY, R2_ACCOUNT_ID, R2_SECRET_KEY } from “$env/static/private”;
import { S3Client } from “@aws-sdk/client-s3”;

const S3 = new S3Client({
region: “auto”,
endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
credentials: {
accessKeyId: R2_ACCESS_KEY,
secretAccessKey: R2_SECRET_KEY,
},
});

export { S3 };

my cors policy:
[ { "AllowedOrigins": [ "http://localhost:5173" ], "AllowedMethods": [ "GET", "PUT", "POST" ] } ]

I’m following this article from okupter:
https://www.okupter.com/blog/upload-files-cloudflare-r2-in-sveltekit