moaaz
moaaz
PostsComments
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
Okay, Thank you for your help! ❤️
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
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
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
yes
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
the upload starts tho
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
That's what was tripping me
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
So I should ditch creatRouteHandler and create my own routes ?
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
better-auth if you know it
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
I am rolling my own auth
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
so how am I supposed to handle auth ?
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
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);
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
yup
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
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
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
you mean in my dashboard ?
35 replies
TTCTheo's Typesafe Cult
Created by moaaz on 5/7/2025 in #questions
CORS error in react vite and express
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,
})
35 replies