CORS error in react vite and express

When uploading an image it starts correctly then I get this cors error. I've this cors settings in vite.config.ts

proxy: {
        '/api': {
            target: env.SERVER_URL,
            changeOrigin: true,
          },
cors: {
        origin: [/^https:\/\/[\w-]+\.ingest\.uploadthing\.com$/],
},

proxy: {
        '/api': {
            target: env.SERVER_URL,
            changeOrigin: true,
          },
cors: {
        origin: [/^https:\/\/[\w-]+\.ingest\.uploadthing\.com$/],
},

And this is the cors setup in express

const LOCAL_REGEX = /^https?:\/\/localhost(?::\d+)?$/
const localCors = cors({
    origin: (origin, cb) => {
        if (!origin || LOCAL_REGEX.test(origin)) cb(null, true)
        else cb(new Error('Not allowed by CORS: ' + origin))
    },
    credentials: true,
})
const UPLOADTHING_REGEX = /^https:\/\/([a-z0-9-]+\.)*uploadthing\.com$/
const uploadCors = cors({
    origin: (origin, cb) => {
        if (!origin || UPLOADTHING_REGEX.test(origin)) cb(null, true)
        else cb(new Error('Not allowed by CORS: ' + origin))
    },
    credentials: false,
})

app.use((req, res, next) => {
    const origin = req.headers.origin || ''
    if (LOCAL_REGEX.test(origin)) {
        return localCors(req, res, next)
    }
    if (UPLOADTHING_REGEX.test(origin)) {
        return uploadCors(req, res, next)
    }
})

const LOCAL_REGEX = /^https?:\/\/localhost(?::\d+)?$/
const localCors = cors({
    origin: (origin, cb) => {
        if (!origin || LOCAL_REGEX.test(origin)) cb(null, true)
        else cb(new Error('Not allowed by CORS: ' + origin))
    },
    credentials: true,
})
const UPLOADTHING_REGEX = /^https:\/\/([a-z0-9-]+\.)*uploadthing\.com$/
const uploadCors = cors({
    origin: (origin, cb) => {
        if (!origin || UPLOADTHING_REGEX.test(origin)) cb(null, true)
        else cb(new Error('Not allowed by CORS: ' + origin))
    },
    credentials: false,
})

app.use((req, res, next) => {
    const origin = req.headers.origin || ''
    if (LOCAL_REGEX.test(origin)) {
        return localCors(req, res, next)
    }
    if (UPLOADTHING_REGEX.test(origin)) {
        return uploadCors(req, res, next)
    }
})

Does anyone know where the problem is ?

22 Replies

msvcredist2022•3d ago

its not proxying thorugh your express backend?

moaazOP•3d ago

It's client side upload. the server is just the upload router, it looks something like this

export const uploadRouter = {
    videoAndImage: f({
        image: {
            maxFileSize: "4MB",
            maxFileCount: 4,
        },
        video: {
            maxFileSize: "16MB",
        },
        blob: { maxFileSize: "8GB", maxFileCount: 10 },
    }).middleware(async ({ req }) => {
       // check for auth
    }).onUploadComplete((data) => {
        console.log("upload completed", data);

    }),
} satisfies FileRouter;
export const uploadRouterHandler = createRouteHandler({
    router: uploadRouter,
})

export const uploadRouter = {
    videoAndImage: f({
        image: {
            maxFileSize: "4MB",
            maxFileCount: 4,
        },
        video: {
            maxFileSize: "16MB",
        },
        blob: { maxFileSize: "8GB", maxFileCount: 10 },
    }).middleware(async ({ req }) => {
       // check for auth
    }).onUploadComplete((data) => {
        console.log("upload completed", data);

    }),
} satisfies FileRouter;
export const uploadRouterHandler = createRouteHandler({
    router: uploadRouter,
})

msvcredist2022•3d ago

you are POSTing directly to uploadthing endpoint though the issue is that CORS is not enabled in uploadthing, you need to either proxy the upload requests or enable CORS for your endpoint on uploadthing

moaazOP•3d ago

you mean in my dashboard ?

msvcredist2022•3d ago

wait no wtf is going on in the console ok nvm i am completely wrong something weird is happening

moaazOP•3d ago

since I am new to UT, from my understanding is my server creates the presigned URL and gives it back to the client which then begins directly uploading to UT. I have no cors errors in my backend so I don't know if it's something vite related

msvcredist2022•3d ago

withcredentials is false?

moaazOP•3d ago

yup

msvcredist2022•3d ago

how are you making the upload request

moaazOP•3d ago

since I need auth I have this custom fetch in the options

export const initOpts = {
    url: process.env.SERVER_URL,
    fetch: (input, init) => {
        console.log(input)
        console.log(init)
        return fetch(input, {
            ...init,
            credentials: "include",
        });
    }
} satisfies GenerateTypedHelpersOptions;

export const initOpts = {
    url: process.env.SERVER_URL,
    fetch: (input, init) => {
        console.log(input)
        console.log(init)
        return fetch(input, {
            ...init,
            credentials: "include",
        });
    }
} satisfies GenerateTypedHelpersOptions;

then generate the react button using

export const UploadButton = generateUploadButton(initOpts);

export const UploadButton = generateUploadButton(initOpts);

msvcredist2022•3d ago

can't include credentials

moaazOP•3d ago

so how am I supposed to handle auth ? I am rolling my own auth better-auth if you know it

msvcredist2022•3d ago

no you generate the presigned url and then that url is good for one upload

msvcredist2022•3d ago

https://docs.uploadthing.com/uploading-files#uploading-the-files

Uploading Files - UploadThing Docs

Uploading files is the first step in the process of uploading files to UploadThing. This page explains the general process of uploading files and how you can use the UploadThing API to upload files. There are two ways to upload files to UploadThing:

msvcredist2022•3d ago

there are also no credentials in the init object as far as i can see from your console

moaazOP•3d ago

So I should ditch creatRouteHandler and create my own routes ? That's what was tripping me the upload starts tho

msvcredist2022•3d ago

wdym? like the uploadrouter?

moaazOP•3d ago

yes

msvcredist2022•3d ago

im not super sure what it does exactly you still need routes to generate your urls

moaazOP•3d ago

I was following the examples at https://github.com/pingdotgg/uploadthing/tree/main/examples/backend-adapters it seemed like I just use createRouteHandler in express server and create the button in React. but when I didn't override the fetch in the initOpts I received no headers/cookies so I couldn't authenticate

GitHub

uploadthing/examples/backend-adapters at main · pingdotgg/uploadthing

File uploads for modern web devs. Contribute to pingdotgg/uploadthing development by creating an account on GitHub.

msvcredist2022•3d ago

yeah idk i cant really comment on backend sorry

moaazOP•3d ago

Okay, Thank you for your help! ❤️

Gaming

Programming

CORS error in react vite and express

Did you find this page helpful?