File is uploaded but getting CORS

Hi everyone, I have next.js app and an endpoint to the laravel backend where I have to upload form data with file I'm getting cors error even though status is 201 and file is uploaded on the backend side, my axios is throwing error so i can't display proper message this is how my code is looking:
const GeneralApplicationForm: React.FC<{}> = ({}) => {
const [cv, setCv] = React.useState<FileList | null>(null);

const form = useForm<z.infer<typeof generalApplicationSchema>>({
resolver: zodResolver(generalApplicationSchema),
defaultValues: {},
});

const handleFormSubmit = async (
data: z.infer<typeof generalApplicationSchema>
) => {
if (!cv) {
form.setError("cv", {
type: "required",
message: "CV is required",
});

return;
}

try {

const res = await axios.post(
endpoint,
{ ...data, cv: cv[0], position: "general-application" },
{
headers: {
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
}
);

console.log(res);
toast.success("Success uploaded");


} catch (error: any) {
console.error(error);

toast.error("Something went wrong");

}



console.log(data);
};

return (

<Form {...form}>
<form onSubmit={form.handleSubmit(handleFormSubmit)}>
<div className="flex gap-4 mt-3 items-center flex-col md:flex-row w-full">
<div className="flex-1 w-full">
<FormInput
type="file"
label="CV/Portfolio"
name="cv"
onFileUpload={(files) => {
setCv(files);
}}
className=""
placeholder=""
/>
</div>
</div>
</form>
</Form>
</div>
);
};
const GeneralApplicationForm: React.FC<{}> = ({}) => {
const [cv, setCv] = React.useState<FileList | null>(null);

const form = useForm<z.infer<typeof generalApplicationSchema>>({
resolver: zodResolver(generalApplicationSchema),
defaultValues: {},
});

const handleFormSubmit = async (
data: z.infer<typeof generalApplicationSchema>
) => {
if (!cv) {
form.setError("cv", {
type: "required",
message: "CV is required",
});

return;
}

try {

const res = await axios.post(
endpoint,
{ ...data, cv: cv[0], position: "general-application" },
{
headers: {
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
}
);

console.log(res);
toast.success("Success uploaded");


} catch (error: any) {
console.error(error);

toast.error("Something went wrong");

}



console.log(data);
};

return (

<Form {...form}>
<form onSubmit={form.handleSubmit(handleFormSubmit)}>
<div className="flex gap-4 mt-3 items-center flex-col md:flex-row w-full">
<div className="flex-1 w-full">
<FormInput
type="file"
label="CV/Portfolio"
name="cv"
onFileUpload={(files) => {
setCv(files);
}}
className=""
placeholder=""
/>
</div>
</div>
</form>
</Form>
</div>
);
};
1 Reply
Makes Sense
Makes Sense3mo ago
Hello @Bozic0909, did you solve your issue? I am facing the exact same one, but cannot figure how to solve it so far
Want results from more Discord servers?
Add your server