AWS S3 on NextJS with tRPC

Question

I am making an app in NextJs where I use tRPC and AWS S3 to upload images.

Code from onSubmit form:

async function onSubmit(data: z.infer<typeof schema>) {
        console.log(data)
        const { file } = data

        if (!file) return null

        // Get upload url
        const { url, fields } = await createURL()

        const formData = new FormData()
        Object.entries(fields).forEach(([key, value]) => {
            formData.append(key, value as string)
        })
        formData.append('file', file)
        
        const uploadResponse = await fetch(url, {
            method: 'POST',
            body: formData,
        })

        if (uploadResponse.ok) {
            console.log("Upload successful!")
        } else {
            console.error('S3 Upload Error:', uploadResponse)
        }

        console.log(uploadResponse)
    }

Create AWS URL (createURL):

import { createPresignedPost } from "@aws-sdk/s3-presigned-post";

export const fileRouter = createTRPCRouter({
    createURL: protectedProcedure.mutation(async ({ ctx }) => {

        const { userId } = ctx
        const contentType = "image/"

        const file = await db.file.create({
            data: {
                userId
            }
        })

        const presignedPost = await createPresignedPost(s3Client, {
            Bucket: process.env.AWS_BUCKET!,
            Key: `${userId}/${file.id}`,
            Conditions: [
                ['content-length-range', 0, 10485760], // up to 10 MB
                ['starts-with', '$Content-Type', contentType],
            ],
            Fields: {
                acl: 'public-read',
                'Content-Type': contentType,
            },
            Expires: 600,
        })

        return presignedPost
    })
})

Every time I try to upload an image I get the following error:

[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. Status code: 403 [Error] Fetch API cannot load https://next-stack-app.s3.us-east-2.amazonaws.com/ due to access control checks. [Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. Status code: 403 (next-stack-app.s3.us-east-2.amazonaws.com, line 0) [Error] Unhandled Promise Rejection: TypeError: Load failed (anonymous function) (index.esm.mjs:2196)